惠风和畅

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #mydiv {
   
3.         width: 1024px;
   
4.         height: 640px;
   
5.         background: url('https://638183.freep.cn/638183/t23/2/dcyk.jpg') no-repeat center/cover;
   
6.         box-shadow: 0 0 6px 0 #000;
   
7.         overflow: hidden;
   
8.         position: relative;
   
9.         margin: 30px auto;
   
10.         --opa1: 0; --opa2: 1; --bgcolor: rgba(255,255,255,.6); --state: paused;
    
11. }
    
12. #btn {
    
13.         display: block;
    
14.         width: 30px;
    
15.         height: 30px;
    
16.         transform: translate(497px,590px);
    
17.         border-radius: 50%;
    
18.         border: 2px solid var(--bgcolor);
    
19.         cursor: pointer;
    
20.         position: absolute;
    
21. }
    
22. #btn:hover { --bgcolor: rgba(255,255,255,.9); }
    
23. #btn::before, #btn::after {
    
24.         position: absolute;
    
25.         content: '';
    
26.         width: 100%;
    
27.         height: 100%;
    
28.         background: var(--bgcolor);
    
29.         transition: .25s;
    
30. }
    
31. #btn::before {
    
32.         clip-path: polygon(35% 25%, 35% 75%, 80% 50%);
    
33.         opacity: var(--opa1);
    
34. }
    
35. #btn::after {
    
36.         clip-path: polygon(30% 30%,30% 70%,45% 70%,45% 30%, 30% 30%,55% 30%,55% 70%,70% 70%,70% 30%);
    
37.         opacity: var(--opa2);
    
38. }
    
39. .plane {
    
40.         display: block;
    
41.         width: 80px;
    
42.         height: 60px;
    
43.         left: 20px;
    
44.         top: 30px;
    
45.         background: linear-gradient(lightgreen,green,lightgreen);
    
46.         opacity: .8;
    
47.         clip-path: polygon(0 0,20% 50%,0 100%,100% 50%);
    
48.         offset-path: path('M20 30 h1004 30');
    
49.         offset-distance: 0%;
    
50.         position: absolute;
    
51.         animation: fly 40s var(--delay) infinite linear var(--state);
    
52.         --delay: 0s;
    
53. }
    
54. .plane:nth-of-type(2), .plane:nth-of-type(4) { --delay: -10s; }
    
55. .plane:nth-of-type(3), .plane:nth-of-type(4) {
    
56.         transform: translateY(510px);
    
57.         opacity: .6;
    
58. }
    
59. @keyframes fly { to { offset-distance: 100%; } }
    
60. </style>
    
61. 
    
62. <div id="mydiv">
    
63.         <span id="btn"></span>
    
64.         <span class="plane"></span>
    
65.         <span class="plane"></span>
    
66.         <span class="plane"></span>
    
67.         <span class="plane"></span>
    
68. </div>
    
69. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1364646699" autoplay="autoplay" loop="loop"></audio>
    
70. 
    
71. <script>
    
72. let setProp = (ele,vals) => vals.forEach((item,key) => ele.style.setProperty(item[0], item[1]));
    
73. let mState = () => { let ar = aud.paused ? [['--opa1','1'],['--opa2','0'],['--state','paused']] : [['--opa1','0'],['--opa2','1'],['--state','running']]; setProp(mydiv,ar); };
    
74. aud.addEventListener('play', mState, false);
    
75. aud.addEventListener('pause', mState, false);
    
76. btn.onclick = () => aud.paused ? aud.play() : aud.pause();
    
77. </script>

复制代码

红影

漂亮，这画面很清净，音乐也好听，这地方挺适合修炼的

红影

这个播放器按钮和小飞机都是用 clip-path: polygon()做出来的呢，这个是很纯粹的css+html+js呢。

红影

4个小飞机是用一组nth-of-type( ) 做出来的，开始还以为是倒影弄的。不过这个好，倒影在有些电脑上显示不了的

红影

用透明度来显示出暂停或播放图标，这个做法很聪明

小辣椒

黑黑 这个飞机是不是用的路径啊

小辣椒

现在只能套用了

马黑黑

小辣椒 发表于 2023-6-14 17:28
现在只能套用了

樵歌

请发定位来，俺要去那露营钓鱼悠闲一个夏天

梦缘

问好老师，欣赏精彩视频佳作，谢谢分享，点赞！

马黑黑

梦缘 发表于 2023-6-14 20:26
问好老师，欣赏精彩视频佳作，谢谢分享，点赞！

马黑黑

小辣椒 发表于 2023-6-14 17:27
黑黑 这个飞机是不是用的路径啊

是的，一个非常简单的路径

马黑黑

红影 发表于 2023-6-14 15:11
漂亮，这画面很清净，音乐也好听，这地方挺适合修炼的

嗯，支持你到这里修炼

马黑黑

樵歌 发表于 2023-6-14 18:57
请发定位来，俺要去那露营钓鱼悠闲一个夏天

发到你微信了

马黑黑

红影 发表于 2023-6-14 15:15
这个播放器按钮和小飞机都是用 clip-path: polygon()做出来的呢，这个是很纯粹的css+html+js呢。

是的，没有使用第三方组件

马黑黑

醉美水芙蓉 发表于 2023-6-14 17:20
黑黑老师这个是在练飞行呀！

是的

马黑黑

红影 发表于 2023-6-14 15:17
4个小飞机是用一组nth-of-type( ) 做出来的，开始还以为是倒影弄的。不过这个好，倒影在有些电脑上显示不了 ...

因为飞机剪裁的一模一样，做倒影也就可以用实体来做了。底下的两个纸飞机是在严重偏离了 offset-path 做运动

马黑黑

红影 发表于 2023-6-14 15:21
用透明度来显示出暂停或播放图标，这个做法很聪明

这个之前也做过类似的