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

马黑黑

马黑黑

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

1. <style>
   
2. .stage {
   
3.         position: relative;
   
4.         left: -352px;
   
5.         width: 1300px;
   
6.         height: 533px;
   
7.         background: #000 url('https://638183.freep.cn/638183/Pic/2022/jz.gif') no-repeat center/cover;
   
8.         overflow: hidden;
   
9.         filter: blur(1px);
   
10.         cursor: pointer;
    
11.         opacity: .9;
    
12. }
    
13. .stage::before {
    
14.         content:attr(data-1);
    
15.         position: absolute;
    
16.         right: 10px;
    
17.         top: 10px;
    
18.         font: 900 3em/1em Sans-seirf;
    
19.         color: green;
    
20.         text-shadow: 2px 2px 4px rgba(0,0,0,.6);
    
21. }
    
22. #ufo {
    
23.         position: absolute;
    
24.         filter: blur(.5px);
    
25.         width: 205px; height: 124px;
    
26.         animation:  fly 8s ease-in-out infinite alternate;
    
27. }
    
28. #ufo::after {
    
29.         content: '';
    
30.         left: 80px; bottom: -10px;
    
31.         position: absolute;
    
32.         width: 0px;
    
33.         height: 0px;
    
34.         border: 20px solid;
    
35.         border-color: transparent transparent green transparent;
    
36.         filter: blur(1px);
    
37.         opacity: .6;
    
38.         transition: .5s;
    
39.         transform-origin: 050%;
    
40.         transform: scale(5,30) ;
    
41.         animation: rot 8s ease-in-out infinite alternate;
    
42. }
    
43. 
    
44. @keyframes fly { to { transform: rotate(20deg) translate(1100px); } }
    
45. @keyframes rot { to { transform: rotate(30deg) scale(15,20) ; } }
    
46. </style>
    
47. 
    
48. <div class="stage" data-1="Kara - 白昼梦">
    
49.         <div id="ufo">
    
50.                 <img alt="" src="https://638183.freep.cn/638183/Pic/2022/feidie.gif" width="205" height="124" />
    
51.         </div>
    
52. </div>
    
53. 
    
54. <script>
    
55. let stage = document.querySelector('.stage');
    
56. let aud = document.createElement('audio');
    
57. aud.src = 'http://www.kumeiwp.com/sub/filestores/2022/03/23/78088abc2dcb7c061f0a5929ef406b5d.mp3';
    
58. aud.autoplay = true;
    
59. aud.loop = true;
    
60. stage.appendChild(aud);
    
61. stage.onclick = () => { aud.paused ? aud.play() : aud.pause(); }
    
62. </script>

复制代码

加林森

老黑这个制作又改变了，厉害！

马黑黑

代码解释：

一、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:07
老黑这个制作又改变了，厉害！

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

加林森

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

挺好看的。

马黑黑

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

一般般吧

加林森

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

你太客气了。

红影

哇，这个厉害了，外星人来了

红影

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

红影

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

马黑黑

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

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

大猫咪

老黑真棒，这效果杠杠的，坐飞碟去看北极光啊   空了必须学习，谢谢老黑

马黑黑

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

红影

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

才十几分钟就出来了啊，太厉害了

马黑黑

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

原理在那，调试而已

红影

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

你厉害，我就算套用十几分钟都弄不好呢

马黑黑

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

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

红影

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

你这个也是做帖呢。厉害

马黑黑

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

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