贺 绿叶清舟 芳辰（2.29）
<style>
.papa { margin: 70px 0 0 calc(50% - 681px); width: 1200px; height: 675px; background: url('https://pic.imgdb.cn/item/65d6e3ec9f345e8d0333e90c.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
#btnplay { position: absolute; width: 110px; height: 110px; left: calc(50% - 20px); top: 398px; mix-blend-mode: normal; filter: hue-rotate(0deg); transition: filter 1s; cursor: pointer; animation: rot 10s linear infinite var(--state); }
#btnplay:hover { filter: hue-rotate(280deg); }
.ipic { position: absolute; bottom: 0; transform: skew(-1.5deg); transform-origin: 50%50%; animation: skew 2s var(--delay) infinite alternate var(--state); }
.ipic:nth-of-type(1) {right: 0px; top: 0px; --delay: -2.5s; opacity: 0.55;}
.ipic:nth-of-type(2) { right: -20px; top: 0px; --delay: 0s; }
.ipic:nth-of-type(3) { transform-origin: 50%80%; left: 480px; top: 60px; --delay: -1.5s; }
#dongtu { position: absolute; left: 30px; top: 120px; opacity: 0.85;}
#vid { position: absolute; width: 100%; height: 110%;top: -10%; opacity: 0.55; object-fit: cover; aspect-ratio: 1;pointer-events: none; mix-blend-mode: screen; }
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes skew { to { transform: skew(1.5deg); transform: scale(1.15);} }
</style>
<div class="papa">
<audio src="https://music.163.com/song/media/outer/url?id=1943801371" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/45/5b4335dba123d_10s_big.mp4" autoplay loop muted oncontextmenu="return false"></video>
<img class="ipic" src="https://pic.imgdb.cn/item/65d6f6d79f345e8d036ade53.png" alt="" />
<img class="ipic" src="https://pic.imgdb.cn/item/65d6f0299f345e8d03572ef5.png" alt="" />
<img class="ipic" src="https://pic.imgdb.cn/item/65d6e6519f345e8d033aeb3c.png" alt="" />
<img id="btnplay" src="https://pic.imgdb.cn/item/65ac84e5871b83018abc5b1d.gif" alt="" title="play" />
<img id="dongtu" src="https://pic.imgdb.cn/item/65d6ea1a9f345e8d0345ea57.gif" alt="" />
</div>
<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js/mpku_simple.js';
document.querySelector('body').appendChild(sf);
</script> 清舟的生日很特别，每隔4年才过一次，今年正好赶上有29号，必须好好庆祝一下呢@绿叶清舟 {:4_177:} 学了个黑黑的摇曳效果。本来在右上角弄了两条彩带摇曳的，总觉得不太好。索性把彩条弄到等高，从中间开始摇曳了。黑黑的效果怎么弄都好看。谢谢黑黑的代码@马黑黑 {:4_187:} 找了个生日DJ串烧组曲，50多分钟的长度呢，足够乐呵好一会了{:4_173:}
祝清舟生日快乐{:4_179:} 红影 发表于 2024-2-22 22:24
学了个黑黑的摇曳效果。本来在右上角弄了两条彩带摇曳的，总觉得不太好。索性把彩条弄到等高，从中间开始摇 ...
不要拘泥与参考对象的设计，这就是创作 马黑黑 发表于 2024-2-22 22:34
不要拘泥与参考对象的设计，这就是创作
谢谢黑黑，先把倾斜定在上面了，后来感觉对这个图形，放当中更好呢{:4_187:} 红影 发表于 2024-2-22 22:50
谢谢黑黑，先把倾斜定在上面了，后来感觉对这个图形，放当中更好呢
一切可以根据情况来 马黑黑 发表于 2024-2-22 22:57
一切可以根据情况来
这个能让静态动起来的代码特别好呢{:4_187:} 红影 发表于 2024-2-22 23:28
这个能让静态动起来的代码特别好呢
不过要应用的好还需要多加尝试 红影 发表于 2024-2-22 22:21
清舟的生日很特别，每隔4年才过一次，今年正好赶上有29号，必须好好庆祝一下呢@绿叶清舟
在这特别的日子里，祝福特别美丽端庄的清舟芳辰快乐！{:4_204:} 借师妹音画美贴祝福清舟芳辰快乐！永远年青，永远十八岁（小辣椒说的）{:4_187:} 清舟朋友生日快乐！四年才一次，要过得热闹点哦！ 谢谢影，用了这么多特效啊，这些俺都不会玩了{:4_204:}{:4_179:} 红影 发表于 2024-2-22 22:21
清舟的生日很特别，每隔4年才过一次，今年正好赶上有29号，必须好好庆祝一下呢@绿叶清舟
谢谢影，小时候都过农历生日，所以都不太记这个日子了{:4_179:} 梦油 发表于 2024-2-23 09:11
清舟朋友生日快乐！四年才一次，要过得热闹点哦！
谢谢梦油，难得有个正日子生日有你们真好 樵歌 发表于 2024-2-23 08:40
借师妹音画美贴祝福清舟芳辰快乐！永远年青，永远十八岁（小辣椒说的）
谢谢樵歌，那得成老妖婆啦{:4_189:} 红影 发表于 2024-2-22 22:27
找了个生日DJ串烧组曲，50多分钟的长度呢，足够乐呵好一会了
祝清舟生日快乐
把前三年的一起乐了{:4_189:} 马黑黑 发表于 2024-2-23 08:29
不过要应用的好还需要多加尝试
嗯嗯，下回我再多弄点样式来试试，谢谢黑黑{:4_187:} 樵歌 发表于 2024-2-23 08:38
在这特别的日子里，祝福特别美丽端庄的清舟芳辰快乐！
跟师兄一起祝福她{:4_187:} 樵歌 发表于 2024-2-23 08:40
借师妹音画美贴祝福清舟芳辰快乐！永远年青，永远十八岁（小辣椒说的）
那是必须的啊，清舟那么雅致灵动的人儿呢{:4_173:}