邓典○极光

马黑黑

马黑黑

原创代码分享：

<style>
.stage {
   position: relative;
   width: 1300px;
   height: 533px;
   background: #000 url('https://638183.freep.cn/638183/Pic/2022/jz.gif') no-repeat center/cover;
   filter: blur(1px);
   cursor: pointer;
}
.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);
}
.light {
   position: absolute;
   bottom: 0;
   width: 0px;
   height: 0px;
   border: 12px solid;
   border-color: transparent green transparent transparent;
   filter: blur(1px);
   opacity: .6;
   transition: .5s;
   transform-origin: 50% 0;
   transform: scale(80,1.2);
   animation: rot 8s ease infinite alternate;
}
#ufo {
   filter: blur(.5px);
   width: 205px; height: 124px;
   animation:  fly 10s ease-in-out infinite alternate;
}
@keyframes fly { to { transform: rotate(20deg) translate(1100px); } }
@keyframes rot {
   to { transform: rotate(-80deg) scale(30,2.5); }
}
</style>

<div class="stage" data-1="邓典·极光">
   <div class="light"></div>
   <img alt="" id="ufo" src="https://638183.freep.cn/638183/Pic/2022/feidie.gif" width="205" height="124" />
</div>

<script>
let stage = document.querySelector('.stage');
let aud = document.createElement('audio');
aud.src = 'http://www.kumeiwp.com/sub/filestores/2022/02/03/38347358be2cf96dcdef7480b313b9c6.mp3';

aud.autoplay = true;
aud.loop = true;
stage.appendChild(aud);
stage.onclick = () => { aud.paused ? aud.play() : aud.pause(); }
</script>

红影

原来那个ufo是不动的，被你填了动画呢。

红影

很玄幻的制作，漂亮

红影

原来动图还能用放大尺寸，嗯，这样就不用因为传大的动图无处传而麻烦了。

红影

ufo和音乐相关联，可以控制音乐的播放呢。

马黑黑

红影 发表于 2022-4-6 14:56
原来动图还能用放大尺寸，嗯，这样就不用因为传大的动图无处传而麻烦了。

也要看图片的质量。如果是矢量图片，那最好，怎么放大都不会失真；不是的话，质量好的也可以适当放大，然后加点模糊滤镜，大概还可以的。

马黑黑

红影 发表于 2022-4-6 14:59
ufo和音乐相关联，可以控制音乐的播放呢。

可以的。我现在是用整个舞台的点击来控制音乐，免得去追那个ufo追不上

马黑黑

红影 发表于 2022-4-6 14:45
原来那个ufo是不动的，被你填了动画呢。

它只有顶部的灯是动态的

红影

马黑黑 发表于 2022-4-6 15:01
可以的。我现在是用整个舞台的点击来控制音乐，免得去追那个ufo追不上

我还满世界去追着点，以为我点中了飞碟呢
这飞碟为什么只定义了translate(1100px)的轨迹却能走出弧形呢，是和transform: rotate(20deg) 这个相关吧，这个原以为是让飞碟自身旋转呢。

马黑黑

红影 发表于 2022-4-6 14:45
很玄幻的制作，漂亮

这里比较值得深究的问题是飞碟的运行轨迹，为什么是这个路线。记得探讨过rotate的怪异行为，我在这里巧妙利用这一点，让它来给出一个半椭圆的运行轨迹，方法是与 translate 结合。

rotate 与 translate 放在一起的时候，translate的运行路线会受到影响。本帖，translate本来是令飞碟沿水平方向行进的，因为有rotate(20deg)在前面，基点已经不是飞碟图片的中心，而是因着rotate的作用产生不是人为定义的变化，故而有这个弧线路径。

马黑黑

红影 发表于 2022-4-6 15:14
我还满世界去追着点，以为我点中了飞碟呢
这飞碟为什么只定义了translate(1100px)的轨迹却能走 ...

你的理解是正确的。恰好我再11楼也给出了解释。

红影

马黑黑 发表于 2022-4-6 14:59
也要看图片的质量。如果是矢量图片，那最好，怎么放大都不会失真；不是的话，质量好的也可以适当放大，然 ...

高度方向你取的值小了，貌似多余的自动被切了。

光柱里有几个不懂。transition: .5s是控制什么的，转动和比例看到动态里有。
还有它的定位，bottom: 0;这个是什么，不带px的么。transform-origin: 50% 0;不是意味着是横向中么，怎么会在底左？

红影

马黑黑 发表于 2022-4-6 15:14
这里比较值得深究的问题是飞碟的运行轨迹，为什么是这个路线。记得探讨过rotate的怪异行为，我在这里巧妙 ...

巧了，正好对这点不理解呢。谢谢黑黑解答

红影

马黑黑 发表于 2022-4-6 15:17
你的理解是正确的。恰好我再11楼也给出了解释。

现在ufo都理解了，光柱还有些疑问，看13楼

马黑黑

红影 发表于 2022-4-6 15:28
现在ufo都理解了，光柱还有些疑问，看13楼

我看看

红影

马黑黑 发表于 2022-4-6 15:08
它只有顶部的灯是动态的

光柱的模糊滤镜正好在顶端？倒是巧了呢，这样看起来更真实

马黑黑

红影 发表于 2022-4-6 15:25
高度方向你取的值小了，貌似多余的自动被切了。

光柱里有几个不懂。transition: .5s是控制什么的，转 ...

图片被剪裁问题：如果总体不受影响，没啥问题。

transition: .5s : 主要是定义一下过渡的时律，为避免物件在运动时出锯齿，我也不知道管不管用。这句没有也行，大咖们都用。

bottom: 0 ：定位光柱在底部。当数值是0时，可以不要单位和百分比符号。

transform-origin: 50% 0; ：这是光柱运动基点，位于 x 50%、y 0 的坐标点。光柱的运动围绕那个基点。

马黑黑

红影 发表于 2022-4-6 15:30
光柱的模糊滤镜正好在顶端？倒是巧了呢，这样看起来更真实

模糊滤镜是针对整体的，至于产生的效果如何，鬼知道

红影

马黑黑 发表于 2022-4-6 15:38
图片被剪裁问题：如果总体不受影响，没啥问题。

transition: .5s : 主要是定义一下过渡的时律，为避免 ...

transform-origin: 50% 0; ：这是光柱运动基点，位于 x 50%、y 0 的坐标点。光柱的运动围绕那个基点。
这个挺难理解，它的50%正好在灯柱的顶点？
bottom: 0 ：定位光柱在底部。为什么是底部的左边？而不是中间或者右边。