Dreaming Girl

马黑黑

马黑黑

代码

1. <style>
   
2. #papa {
   
3.         margin: 0 0 0 calc(50% - 801px);
   
4.         width: 1440px;
   
5.         height: 810px;
   
6.         background: url('https://638183.freep.cn/638183/t24/jpg/dream.jpg') no-repeat center/cover;
   
7.         box-shadow: 4px 4px 16px rgba(0,0,0,.7);
   
8.         overflow: hidden;
   
9.         position: relative;
   
10.         pointer-events: none;
    
11. }
    
12. #papa::before, #papa::after {
    
13.         position: absolute;
    
14.         content: '';
    
15.         width: 100%;
    
16.         height: 100%;
    
17. }
    
18. #papa::after {
    
19.         background: rgba(0,122,45,.5);
    
20.         clip-path: polygon(50% 0,100% 50%,50% 100%, 0 50%);
    
21.         animation: opt 20s infinite alternate var(--state);
    
22. }
    
23. 
    
24. #papa::before {
    
25.         width: 428px;
    
26.         height: 428px;
    
27.         left: calc(50% - 214px);
    
28.         top: calc(50% - 214px);
    
29.         clip-path: circle(214px);
    
30.         background: url('https://638183.freep.cn/638183/t24/webp/dreamgirl.webp') no-repeat center;
    
31.         opacity: .45;
    
32.         box-shadow: inset 0 0 300px blue;
    
33.         cursor: pointer;
    
34.         pointer-events: auto;
    
35.         animation: rot 10s infinite linear var(--state);
    
36. }
    
37. @keyframes opt {
    
38.         from { transform: scale(1) rotate(0); }
    
39.         to { transform: scale(0) rotate(45deg); }
    
40. }
    
41. @keyframes rot { to { transform: rotate(360deg); } }
    
42. </style>
    
43. 
    
44. <div id="papa" title="play|pause"></div>
    
45. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1494213335" autoplay loop></audio>
    
46. 
    
47. <script>
    
48. 
    
49. var mState = () => aud.paused ?
    
50.         (papa.style.setProperty('--state','paused'),papa.title = '点击播放') :
    
51.         (papa.style.setProperty('--state','running'),papa.title = '点击暂停');
    
52. aud.addEventListener('playing', mState, false);
    
53. aud.addEventListener('pause', mState, false);
    
54. papa.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
    
55. 
    
56. </script>

复制代码

马黑黑

帖子总共用了两个CSS关键帧动画，一是播放控制器（伪元素 ::before）旋转，二是菱形（伪元素 ::after）往复缩放+旋转。

帖子中用到 clip-path 技术，对两个伪元素进行切片。菱形伪元素尺寸与宿主元素一致，用 polygon 函数裁剪而成；圆形伪元素有自己的尺寸，用 circle 函数切出来（其实也可以直接用 border-radius: 50% 做出）。

JS极其简单，基本就两个功能：按钮（及其按钮信息）交互；音频控制。音频控制与按钮的交互是互为关联的有机操控。

马黑黑

Firefox和Chromium下，设计的效果均得到完美渲染。

IE7下，音乐都木有。IE11下，有音乐，但其他的效果出不来。其他版本的IE没有测试，肯定也不行。怪不得微软抛弃了自己的亲生儿子，领养了开源的大胖妞 Chromium 做成 Edge（话说Edge是优秀的）。

侃大山

外国风格的，好看

红影

又是一个新的效果，黑黑太厉害了

马黑黑

醉美水芙蓉 发表于 2024-1-12 11:38
老师这个特效漂亮！

谢谢

马黑黑

侃大山 发表于 2024-1-12 11:03
外国风格的，好看

马黑黑

红影 发表于 2024-1-12 11:16
又是一个新的效果，黑黑太厉害了

哪里哪里，一般般

樵歌

童话世界，美极！风格有点像中亚的

马黑黑

樵歌 发表于 2024-1-12 15:19
童话世界，美极！风格有点像中亚的

也像那个波兰的印第安人后裔歌手的风格，演唱最后一个莫西干人的那位，不同的是这支曲子是积极乐观的

红影

马黑黑 发表于 2024-1-12 11:51
哪里哪里，一般般

音乐也很合适，这样的帖子好看

马黑黑

红影 发表于 2024-1-12 20:08
音乐也很合适，这样的帖子好看

谢谢认同

红影

马黑黑 发表于 2024-1-12 20:24
谢谢认同

用菱形罩起一个梦，有趣

马黑黑

红影 发表于 2024-1-12 21:38
用菱形罩起一个梦，有趣

旋转的时候有立体感

小辣椒

突然发现这里还有一个我没有看见过的

小辣椒

黑黑你的速度超过神15了

小辣椒

明天上来继续看了，今天太迟了

马黑黑

小辣椒 发表于 2024-1-12 23:50
明天上来继续看了，今天太迟了

注意休息