学习帖【私藏冬日雪】
<style>
.tiezi {
margin: 30px 0 30px calc(50% - 561px);
width: 960px;
height: 600px;
box-sizing: border-box;
border: 3px solid;
border-image: linear-gradient(to top right, orange, green, red, cyan) 3 3;
background: url('https://pic.imgdb.cn/item/66ab312ed9c307b7e90f0e5c.gif') no-repeat center/cover;
z-index: 1;
pointer-events: none;
position: relative;
}
.tiezi::before, .tiezi::after {
position: absolute;
content: '';
transition: all .45s;
}
.tiezi::before {
inset: 0;
background: rgba(255, 255, 255, 0.35);
backdrop-filter: hue-rotate(var(--hue));
}
.tiezi::after {
right: 260px;
top: 120px;
width: 50px;
height: 50px;
background: url('https://638183.freep.cn/638183/web/svg/flower_1.svg') no-repeat center/cover;
transform: rotate(var(--hue));
pointer-events: auto;
cursor: pointer;
}
.tiezi:hover::before { backdrop-filter: unset; }
</style>
<div class="tiezi" id="tzi">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2609730594" autoplay loop></audio>
</div>
<script>
aud.ontimeupdate = () => tzi.style.setProperty('--hue', Math.floor(Math.random() * 360) + 'deg');
tzi.onclick = () => aud.paused ? aud.play() : aud.pause();
</script> 这动图制作漂亮，用在背景变色的代码里，效果更明显{:4_187:} 歌曲也好听，欣赏梦江南好帖{:4_199:} 红影 发表于 2024-8-1 16:01
这动图制作漂亮，用在背景变色的代码里，效果更明显
谢谢影子分享支持鼓励。下午好！{:4_204:} 红影 发表于 2024-8-1 16:02
歌曲也好听，欣赏梦江南好帖
这个女孩子的眼睛有眨得太快吗？ 好浪漫的画面。 醉美水芙蓉 发表于 2024-8-1 16:52
眼睛一眨一眨很漂亮！
谢谢醉美水芙蓉老师分享支持，问好！{:4_204:} 醉美水芙蓉 发表于 2024-8-1 16:52
欣赏老师带来的精彩！
谢谢，谢谢醉美水芙蓉老师，祝夏日安康！{:4_204:} 梦油 发表于 2024-8-1 16:59
好浪漫的画面。
谢谢棼油老师分享支持，问好！{:4_204:} 太热了，现在就开始呼唤冬天了{:5_106:} 漂亮的变色动画，欣赏老师好帖{:4_204:} 梦江南 发表于 2024-8-1 16:35
谢谢影子分享支持鼓励。下午好！
应该谢谢江南带来的好帖才是，给人以美好的感受呢{:4_187:} 梦江南 发表于 2024-8-1 16:37
这个女孩子的眼睛有眨得太快吗？
还好，这样正好看得出来，太慢可能会不注意{:4_173:} 起个网名好难 发表于 2024-8-1 18:16
太热了，现在就开始呼唤冬天了
是啊，你那里还要热了！ 竹溪 发表于 2024-8-1 18:29
漂亮的变色动画，欣赏老师好帖
问好竹溪，谢谢支持，祝夏安！{:4_204:} 红影 发表于 2024-8-1 20:49
应该谢谢江南带来的好帖才是，给人以美好的感受呢
谢谢影子分享支持，您的支持是我的最大动力！早上好！{:4_204:} 红影 发表于 2024-8-1 20:50
还好，这样正好看得出来，太慢可能会不注意
看看还好，哈哈。{:4_173:} 梦江南 发表于 2024-8-2 07:52
是啊，你那里还要热了！
熬着呗{:5_156:}
页:
[1]
2