【代码习作】学习彩云飞老师代码《菊花香》

闲云

闲云

1. <style>
   
2. #papa{
   
3.         position: relative;
   
4.         width: 960px;
   
5.         height: 600px;
   
6.         margin-left:-20px;
   
7.         margin-top:0px;
   
8.         border: 0px solid rgba(36, 201, 219,.95);
   
9.         border-radius: 0px;
   
10.         background:#000 url('https://pic.imgdb.cn/item/66135afc68eb9357135ffd24.jpg')no-repeat center/cover;
    
11.         overflow: hidden;
    
12. 
    
13. }
    
14. #papa > video {
    
15.         position: absolute;
    
16.         width: 100%;
    
17.         height:100%;
    
18.         object-fit: cover;mix-blend-mode: screen;
    
19.         -webkit-mask: linear-gra**nt(to right top, red 1%, transparent 100%, transparent);
    
20.         transform: rotateX(360deg);pointer-events: none;
    
21. }
    
22. .img-container {
    
23.   position: relative;
    
24.   height: 600px;
    
25.   width: 686px;left:340px;top: -3%;
    
26.   perspective: 500px;
    
27.   transform-style: preserve-3d;
    
28. }
    
29. .box {      
    
30.   width: 620px;
    
31.   height: 400px;
    
32.   border-radius: 0px;
    
33.   overflow: hidden;
    
34.   border: 3px solid #ccc;
    
35.   position: absolute;
    
36.   top: 50%;
    
37.   transition: 800ms ease-in-out;
    
38. }
    
39. 
    
40. .box img {
    
41.   width: 100%;
    
42.   height: 100%;
    
43. }
    
44. 
    
45. .box:first-of-type {
    
46.   z-index: 1;
    
47.   opacity: 0;
    
48.   left: 15%;
    
49.   transform: translate(-100%, -100%) rotateY(50deg);
    
50. }
    
51. 
    
52. .box:nth-of-type(2) {
    
53.   opacity: 1;
    
54.   left: 20%;
    
55.   transform: translate(-50%, -50%) rotateY(-10deg);
    
56.   z-index: 1;
    
57. }
    
58. 
    
59. .box:nth-of-type(3) {
    
60.   left: 25%;
    
61.   opacity: 0.90;
    
62.   color: #eee;
    
63.   z-index: 10;
    
64.   transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-40px);
    
65. }
    
66. .box:nth-of-type(4) {
    
67.   z-index: 8;
    
68.   opacity: 0.80;
    
69.   left:30%;
    
70.   transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-80px);
    
71. }
    
72. 
    
73. .box:nth-of-type(5) {
    
74.   z-index: 7;
    
75.   opacity: 0.70;
    
76.   left: 35%;
    
77.   transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-120px);
    
78. }
    
79. 
    
80. .box:nth-of-type(6) {
    
81.   z-index: 6;
    
82.   opacity: 0.6;
    
83.   left: 40%;
    
84.   transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-160px);
    
85. }
    
86. 
    
87. .box:nth-of-type(7) {
    
88.   z-index: 5;
    
89.   opacity: 0.5;
    
90.   left: 45%;
    
91.   transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-200px);
    
92. }
    
93. .box:nth-of-type(8) {
    
94.   z-index: 4;
    
95.   opacity: 0.4;
    
96.   left: 50%;
    
97.   transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-240px);
    
98. }
    
99. .box:nth-of-type(9) {
    
100.   z-index: 3;
     
101.   opacity: 0.3;
     
102.   left: 55%;
     
103.   transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-280px);
     
104. }
     
105. .box:nth-of-type(10) {
     
106.   z-index: 2;
     
107.   opacity: 0;
     
108.   left: 60%;
     
109.   transform: translate(-50%, -50%) rotateY(-10deg) translateZ(-320px);
     
110. }
     
111. </style>
     
112. 
     
113. <div id="papa" >
     
114. <video src="https://img.tukuppt.com/video_show/2629112/00/02/06/5b509c34df30f.mp4" autoplay loop muted></video>
     
115. <div class="img-container" >
     
116.       <div class="box">
     
117.         <img src="https://pic.imgdb.cn/item/670f6b83d29ded1a8cfd0e89.jpg">
     
118.       </div>
     
119.       <div class="box">
     
120.          <img src="https://pic.imgdb.cn/item/670f6b83d29ded1a8cfd0e7c.jpg">
     
121.       </div>
     
122.       <div class="box">
     
123.         <img src="https://pic.imgdb.cn/item/670f6b83d29ded1a8cfd0e76.jpg">
     
124.       </div>
     
125.       <div class="box">
     
126.          <img src="https://pic.imgdb.cn/item/670f6b83d29ded1a8cfd0e6c.jpg">
     
127.       </div>
     
128.       <div class="box">
     
129.          <img src="https://pic.imgdb.cn/item/670f6b83d29ded1a8cfd0e57.jpg">
     
130.       </div>
     
131.       <div class="box">
     
132.         <img src="https://pic.imgdb.cn/item/670f6b83d29ded1a8cfd0e31.jpg">
     
133.       </div>
     
134.       <div class="box">
     
135.          <img src="https://pic.imgdb.cn/item/670f6b82d29ded1a8cfd0dea.jpg">
     
136.       </div>
     
137.       <div class="box">
     
138.          <img src="https://pic.imgdb.cn/item/670f6b82d29ded1a8cfd0dd0.jpg">
     
139.       </div>
     
140.       <div class="box">
     
141.          <img src="https://pic.imgdb.cn/item/67055622d29ded1a8cd75fd9.jpg">
     
142.        </div>
     
143. </div>
     
144. </div>
     
145. 
     
146. <script>
     
147. let imgContainer = document.querySelector(".img-container");
     
148. setInterval(() => {
     
149.         let last = imgContainer.firstElementChild;
     
150.         last.remove();
     
151.         imgContainer.appendChild(last);
     
152.       }, 2500);
     
153. </script><video autoplay="" controls="" height="0" src="https://music.163.com/song/media/outer/url?id=232334.mp3" width="0">
     

复制代码

微尘

欣赏了老弟的精彩代码音画佳作——《菊花香》，大赞一个！

老钟

这个代码很好，学习了。

筱亭

老师这方面是高手啊

闲云

微尘 发表于 2024-10-20 22:44
欣赏了老弟的精彩代码音画佳作——《菊花香》，大赞一个！

非常感谢微尘老哥的关注支持，早晨好！

闲云

老钟 发表于 2024-10-21 02:55
这个代码很好，学习了。

非常感谢钟老师的关注支持，早晨好！

闲云

筱亭 发表于 2024-10-21 03:38
老师这方面是高手啊

非常感谢筱亭老师的关注支持，早晨好！

老谟深虑

          欣赏老乡的精美制作，彩云归老师的这个代码很好，学习了！

闲云

老谟深虑 发表于 2024-10-21 06:57
欣赏老乡的精美制作，彩云归老师的这个代码很好，学习了！

非常感谢老乡的关注支持，早晨好！