【漫步特效】半山听雨/贺素心芳辰/15种滤镜过渡动画＋CSS雨

云端漫步

云端漫步

@素心 祝素心生辰快乐！
寿星上线！新一岁负责貌美如花，发财躺平，忧愁通通靠边站。

云端漫步

此代码作品随着音乐节奏图片轮播延放，音乐时长五分三十秒终时，15组潮流CSS滤镜图片会快速
轮播，而后再随着音乐节奏继续图片轮播。代码内编辑了40条CSS加密直流下雨滴。

云端漫步

@雨声
雨声你上次问我代码特效，你的图渲染很不错，标题也比我有创意。给你个四张图片效果作业。
可换四张图换熊猫视频换音乐就行，代码内己注解。发表时不好缺少代码内英文字母。否则乱码。发表时删掉注解中文字。
如</* 背景图随便放-张*/>字样。

1. <style>
   
2. #mydiv {
   
3.     margin: 160px 0 30px calc(50% - 900px);
   
4.     display: grid;
   
5.     place-items: center;
   
6.     width: 1700px;
   
7.     height: 850px;
   
8.     background: lightblue url('https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/4/55.jpg') no-repeat center/cover;</* 背景图随便放-张*/>
   
9.     box-shadow: 3px 3px 20px #000;
   
10.     user-select: none;
    
11.     overflow: hidden;
    
12.     position: relative;
    
13.     z-index: 1;  
    
14. }
    
15. #vid {
    
16.     position: absolute;
    
17.     width: 130%;
    
18.     height: 130%;
    
19.     object-fit: cover;
    
20.     pointer-events: none;
    
21.     mix-blend-mode: screen;
    
22.     mask: linear-gradient(to top right, red 88%, transparent 0);   
    
23.     -webkit-mask: linear-gradient(to top right, red 88%, transparent 0);   
    
24.     z-index: 6;
    
25.     opacity: .33;</* 熊猫视频调整透明度 */>
    
26. }
    
27. .img-container {
    
28.     position: absolute;
    
29.     width: 100%;
    
30.     height: 100%;
    
31.     opacity: 0;
    
32.     animation-duration: 20s;
    
33.     animation-iteration-count: infinite;
    
34. }
    
35. .img-container img {
    
36.     width: 100%;
    
37.     height: 100%;
    
38.     object-fit: cover;
    
39. }
    
40. #img1 {
    
41.     animation-name: shakeIn;
    
42. }
    
43. @keyframes shakeIn {
    
44.     0%, 25%, 100% { transform: translateX(0) rotate(0); opacity: 0; }
    
45.     5%, 20% { opacity: 1; transform: translateX(0); }
    
46.     10% { transform: translateX(-50px) rotate(-5deg); }
    
47.     15% { transform: translateX(50px) rotate(5deg); }
    
48. }
    
49. #img2 {
    
50.     animation-name: scaleIn;
    
51. }
    
52. @keyframes scaleIn {
    
53.     0%, 25%, 50%, 100% { transform: scale(0.8); opacity: 0; }
    
54.     30%, 45% { transform: scale(1); opacity: 1; }
    
55. }
    
56. #img3 {
    
57.     animation-name: fadeIn;
    
58. }
    
59. @keyframes fadeIn {
    
60.     0%, 50%, 75%, 100% { opacity: 0; }
    
61.     55%, 70% { opacity: 1; }
    
62. }
    
63. #img4 {
    
64.     animation-name: rotateIn;
    
65. }
    
66. @keyframes rotateIn {
    
67.     0%, 75%, 100% { transform: rotate(-360deg) scale(0.8); opacity: 0; }
    
68.     80%, 95% { transform: rotate(0) scale(1); opacity: 1; }
    
69. }
    
70. </style>
    
71.   
    
72. <div id="mydiv">
    
73.     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1334095915.mp3" autoplay loop></audio> </* 音乐链*/>
    
74.     <video id="vid" src="https://img2.tukuppt.com/video_show/3664703/00/01/99/5b4ec1eadde6f.mp4" autoplay="" loop="" muted=""></video></* 熊猫视频 */>
    
75.         <!-- 四张满屏图片 -->
    
76.     <div id="img1" class="img-container">
    
77.         <img src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/4/55.jpg" alt="图片1">
    
78.     </div>
    
79.     <div id="img2" class="img-container">
    
80.         <img src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/4/66.jpg" alt="图片2">
    
81.     </div>
    
82.     <div id="img3" class="img-container">
    
83.         <img src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/4/77.jpg" alt="图片3">
    
84.     </div>
    
85.     <div id="img4" class="img-container">
    
86.         <img src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/4/88.jpg" alt="图片4">
    
87.     </div>
    
88. </div>

复制代码

素心

这上来就收到这么大的礼物，也太精彩了吧，15种滤镜，这做的也是太震了，让人看了跟一部古韵短剧一样

素心

跟漫步同学在刷图版认识的时间不长，却有感制图的勤勉与新颖
喜欢新鲜事物的我，常常会在帖子里跟风学习，获益良多
漫步同学也是一个乐于分享的，常常将自己的技巧和所掌握的东西拿出来，提供了很多的学习乐趣
这个半山听雨，我看到就笑了，这个图，一半送我一半送雨声
这样的感觉真不错，

素心

非常棒的礼物，每一处都藏着你的用心和细致，道一声辛苦了

云端漫步

素心 发表于 2026-7-19 20:22
这上来就收到这么大的礼物，也太精彩了吧，15种滤镜，这做的也是太震了，让人看了跟一部古韵短剧一样 ...

素心同学来了，呵呵这帖代码我送雨声生日帖西湖十景两帖同时编辑代码的，
两帖编辑代码编编停停大约一星期左右完成的，你这帖代码是潮流CSS滤镜，
与雨声生日帖代码不一样，这代码与随着音乐节奏转变延播的。

欧阳风刀

15种滤镜过渡动画，文件够大，漫步兄制作辛苦。

素心

仔仔细细的看了两遍，真的是无可挑剔的美轮美奂，自然灵动不失风华绝代的女子翩然，加上音乐的衬染，点赞点赞了