论坛 › 欢乐水吧 › 好吧让UFO发光：Kara - 白昼梦

马黑黑 发表于 2022-4-6 17:44

好吧让UFO发光：Kara - 白昼梦

<style>
.stage {
        position: relative;
        left: -352px;
        width: 1300px;
        height: 533px;
        background: #000 url('https://638183.freep.cn/638183/Pic/2022/jz.gif') no-repeat center/cover;
        overflow: hidden;
        filter: blur(1px);
        cursor: pointer;
        opacity: .9;
}
.stage::before {
        content:attr(data-1);
        position: absolute;
        right: 10px;
        top: 10px;
        font: 900 3em/1em Sans-seirf;
        color: green;
        text-shadow: 2px 2px 4px rgba(0,0,0,.6);
}
#ufo {
        position: absolute;
        filter: blur(.5px);
        width: 205px; height: 124px;
        animation:fly 8s ease-in-out infinite alternate;
}
#ufo::after {
        content: '';
        left: 80px; bottom: -10px;
        position: absolute;
        width: 0px;
        height: 0px;
        border: 20px solid;
        border-color: transparent transparent green transparent;
        filter: blur(1px);
        opacity: .6;
        transition: .5s;
        transform-origin: 050%;
        transform: scale(5,30) ;
        animation: rot 8s ease-in-out infinite alternate;
}

@keyframes fly { to { transform: rotate(20deg) translate(1100px); } }
@keyframes rot { to { transform: rotate(30deg) scale(15,20) ; } }
</style>

<div class="stage" data-1="Kara - 白昼梦">
        <div id="ufo">
                <img alt="" src="https://638183.freep.cn/638183/Pic/2022/feidie.gif" width="205" height="124" />
        </div>
</div>

<script>
let stage = document.querySelector('.stage');
let aud = document.createElement('audio');
aud.src = 'http://www.kumeiwp.com/sub/filestores/2022/03/23/78088abc2dcb7c061f0a5929ef406b5d.mp3';
aud.autoplay = true;
aud.loop = true;
stage.appendChild(aud);
stage.onclick = () => { aud.paused ? aud.play() : aud.pause(); }
</script>

马黑黑 发表于 2022-4-6 17:50

感觉动画有点粗糙，需要细细调整吧。这是只是提供UFO发出探照光柱的实现思路与方法：

<style>
.stage {
        position: relative;
        left: -352px;
        width: 1300px;
        height: 533px;
        background: #000 url('https://638183.freep.cn/638183/Pic/2022/jz.gif') no-repeat center/cover;
        overflow: hidden;
        filter: blur(1px);
        cursor: pointer;
        opacity: .9;
}
.stage::before {
        content:attr(data-1);
        position: absolute;
        right: 10px;
        top: 10px;
        font: 900 3em/1em Sans-seirf;
        color: green;
        text-shadow: 2px 2px 4px rgba(0,0,0,.6);
}
#ufo {
        position: absolute;
        filter: blur(.5px);
        width: 205px; height: 124px;
        animation:fly 8s ease-in-out infinite alternate;
}
#ufo::after {
        content: '';
        left: 80px; bottom: -10px;
        position: absolute;
        width: 0px;
        height: 0px;
        border: 20px solid;
        border-color: transparent transparent green transparent;
        filter: blur(1px);
        opacity: .6;
        transition: .5s;
        transform-origin: 050%;
        transform: scale(5,30) ;
        animation: rot 8s ease-in-out infinite alternate;
}

@keyframes fly { to { transform: rotate(20deg) translate(1100px); } }
@keyframes rot { to { transform: rotate(30deg) scale(15,20) ; } }
</style>

<div class="stage" data-1="Kara - 白昼梦">
        <div id="ufo">
                <img alt="" src="https://638183.freep.cn/638183/Pic/2022/feidie.gif" width="205" height="124" />
        </div>
</div>

<script>
let stage = document.querySelector('.stage');
let aud = document.createElement('audio');
aud.src = 'http://www.kumeiwp.com/sub/filestores/2022/03/23/78088abc2dcb7c061f0a5929ef406b5d.mp3';
aud.autoplay = true;
aud.loop = true;
stage.appendChild(aud);
stage.onclick = () => { aud.paused ? aud.play() : aud.pause(); }
</script>

加林森 发表于 2022-4-6 18:07

老黑这个制作又改变了，厉害！{:4_199:}

马黑黑 发表于 2022-4-6 18:08

代码解释：

一、CSS部分

① .stage 选择器：帖子主体盒子，加载了动态背景图，就是占整个页面的图片。它有一个伪元素.stage::before，用于显示帖子标题。

② #ufo 选择器：.stage的子元素，div盒子，它的HTML实体用于装载UFO图片；它也有一个伪元素#ufo::after，用以模拟光柱。#ufo选择器运行弧线轨迹的动画，伪元素#ufo::after运行光柱变化的动画。

③ 动画@keyframes fly：UFO主体做弧线运动用，只一句，基于transform转换运动的变化，一是（从初始状态）倾斜到20度（rotate(20deg)），二是从初始位置平移到1100px处（translate(1100px)）。

④ 动画@keyframes rot：光柱变化之用，也只一句，也是基于transform转换的运动，两个动作，一个是从初始状态倾斜到30度（rotate(30deg)），另一个是从初始大小变到{xy}为{15,20}倍的样纸。

二、HTML实体部分

三个节点，就是说有三个层次：第一层是 .stage “舞台”，第二层是 #UFO ，第三层在 #UFO 里面，一张图片+一个#UFO伪元素。

三、JS部分：两个功能，一个是音乐控制，单击窗体（主场景）可暂停/播放音乐，另一个是加载audio播放器。

马黑黑 发表于 2022-4-6 18:09

加林森 发表于 2022-4-6 18:07
老黑这个制作又改变了，厉害！

讨论中红影提出的建议，试着去实现了，有点粗糙

加林森 发表于 2022-4-6 18:20

马黑黑 发表于 2022-4-6 18:09
讨论中红影提出的建议，试着去实现了，有点粗糙

挺好看的。

马黑黑 发表于 2022-4-6 18:35

加林森 发表于 2022-4-6 18:20
挺好看的。

一般般吧

加林森 发表于 2022-4-6 18:56

马黑黑 发表于 2022-4-6 18:35
一般般吧

你太客气了。

红影 发表于 2022-4-6 19:32

哇，这个厉害了，外星人来了{:4_172:}

红影 发表于 2022-4-6 19:34

黑黑还真的能实现啊，太厉害了{:4_199:}
前面玩一会感觉特别困就跑去呼呼了，没想到黑黑真的做出来了，真棒{:5_116:}

红影 发表于 2022-4-6 19:35

对，就是这个效果，让探照灯在飞碟下面扫描。这个太玄幻了，简直是科幻大片啊{:4_199:}

马黑黑 发表于 2022-4-6 19:51

红影 发表于 2022-4-6 19:35
对，就是这个效果，让探照灯在飞碟下面扫描。这个太玄幻了，简直是科幻大片啊

你一个想法，花我十多分钟啊

大猫咪 发表于 2022-4-6 20:28

老黑真棒，这效果杠杠的，坐飞碟去看北极光啊 {:5_106:}空了必须学习，谢谢老黑{:4_179:}{:4_190:}

马黑黑 发表于 2022-4-6 21:23

大猫咪 发表于 2022-4-6 20:28
老黑真棒，这效果杠杠的，坐飞碟去看北极光啊   空了必须学习，谢谢老黑

{:5_108:}{:4_190:}

红影 发表于 2022-4-6 21:57

马黑黑 发表于 2022-4-6 19:51
你一个想法，花我十多分钟啊

才十几分钟就出来了啊，太厉害了{:4_173:}

马黑黑 发表于 2022-4-6 21:58

红影 发表于 2022-4-6 21:57
才十几分钟就出来了啊，太厉害了

原理在那，调试而已

红影 发表于 2022-4-7 12:53

马黑黑 发表于 2022-4-6 21:58
原理在那，调试而已

你厉害，我就算套用十几分钟都弄不好呢{:4_199:}

马黑黑 发表于 2022-4-7 13:12

红影 发表于 2022-4-7 12:53
你厉害，我就算套用十几分钟都弄不好呢

那是做帖了，属于文艺创作

红影 发表于 2022-4-7 21:12

马黑黑 发表于 2022-4-7 13:12
那是做帖了，属于文艺创作

你这个也是做帖呢。厉害{:4_187:}

马黑黑 发表于 2022-4-7 22:04

红影 发表于 2022-4-7 21:12
你这个也是做帖呢。厉害

我只是演示一下工具的灵活运用。我对美比较迟钝

查看完整版本: 好吧让UFO发光：Kara - 白昼梦