Spring
<style>#papa { margin: 20px 0 20px calc(50% - 681px); width: 1200px; height: 675px; background: lightgreen url('https://638183.freep.cn/638183/t24/jpg/22u.jpeg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
#papa > img { position: absolute; transform: translate(700px, -50px) rotate(-45deg); width: 80px; filter: hue-rotate(90deg); animation: fly 10s linear infinite var(--state); }
#papa > img:nth-of-type(2) { filter: hue-rotate(180deg); animation-delay: -5s; }
#iplay { position: absolute; bottom: 15px; left: calc(50% - 90px); width: 180px; height: 180px; border-style: dotted double ridge; border-color: orange red; border-width: 20px; border-radius: 50%; outline: 10px double olive; outline-offset: 2px; animation: flash .4s linear infinite alternate var(--state); cursor: pointer; }
#iplay::before { position: absolute; content: ''; inset: -10px; border-radius: 50%; background: url('https://638183.freep.cn/638183/small/retina.jpg') no-repeat center/cover; z-index: -1; animation: rotating 10s linear infinite var(--state); }
@keyframes flash { to { border-color: red orange; outline-color: green; } }
@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes fly { to { transform: translate(-50px, 280px) rotate(0); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2428512" autoplay loop></audio>
<img src="https://i02piccdn.sogoucdn.com/5dc726c7d9a42fc3" alt="" />
<img src="https://i02piccdn.sogoucdn.com/5dc726c7d9a42fc3" alt="" />
<div id="iplay"></div>
</div>
<script>
var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
iplay.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
美妙的边框色彩变幻，漂亮的播放器按钮和小燕子的路径{:4_199:} 红影 发表于 2024-2-14 11:19
美妙的边框色彩变幻，漂亮的播放器按钮和小燕子的路径
燕子的飞翔没有使用路径，它们的飞行轨迹通过 transform完成 马黑黑 发表于 2024-2-14 11:21
燕子的飞翔没有使用路径，它们的飞行轨迹通过 transform完成
你是不是需要占楼啊，被我回复得太快了{:4_173:}
嗯嗯，去看了，只是通过 transform就完成了，很便捷。
这个 outline: 10px double olive;的设计挺有趣的。 两只燕子，用个 animation-delay:就错开了，飞的时候要有角度的转平的，不至于一头扎到水里{:4_189:} 红影 发表于 2024-2-14 11:30
两只燕子，用个 animation-delay:就错开了，飞的时候要有角度的转平的，不至于一头扎到水里
熟悉各种属性的特点，就可以随心所欲进行设计 红影 发表于 2024-2-14 11:27
你是不是需要占楼啊，被我回复得太快了
嗯嗯，去看了，只是通过 transform就完成了，很便捷。
...
今天也没想到要占楼 醉美水芙蓉 发表于 2024-2-14 14:44
欣赏黑黑老师新作品！
{:4_190:} 马黑黑 发表于 2024-2-14 12:42
熟悉各种属性的特点，就可以随心所欲进行设计
黑黑的设计好棒，尤其燕子的姿态调整{:4_187:} 马黑黑 发表于 2024-2-14 12:43
今天也没想到要占楼
嗯嗯，看到黑黑单独发帖了，这样也好，可以讲得更详细了呢{:4_187:} 把静态的燕子都能飞起来，要弄个人儿上去溜溜如何{:4_174:} 樵歌 发表于 2024-2-14 19:27
把静态的燕子都能飞起来，要弄个人儿上去溜溜如何
摔烂PP肿么办 红影 发表于 2024-2-14 18:58
嗯嗯，看到黑黑单独发帖了，这样也好，可以讲得更详细了呢
也不见得 马黑黑 发表于 2024-2-14 20:07
也不见得
我是觉得挺详细的呢{:4_187:} 红影 发表于 2024-2-14 21:43
我是觉得挺详细的呢
那未必，粗略说说而已 马黑黑 发表于 2024-2-14 22:16
那未必，粗略说说而已
说的正好都是我不会的，会的就不用说了啊{:4_173:} 红影 发表于 2024-2-14 22:54
说的正好都是我不会的，会的就不用说了啊
这个说法费解 马黑黑 发表于 2024-2-14 23:27
这个说法费解
没事，我自己看懂了{:4_173:} 红影 发表于 2024-2-15 13:25
没事，我自己看懂了
那挺好
页:
[1]
2