梦江南 发表于 2024-8-1 15:54

学习帖【私藏冬日雪】


<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>

红影 发表于 2024-8-1 16:01

这动图制作漂亮,用在背景变色的代码里,效果更明显{:4_187:}

红影 发表于 2024-8-1 16:02

歌曲也好听,欣赏梦江南好帖{:4_199:}

梦江南 发表于 2024-8-1 16:35

红影 发表于 2024-8-1 16:01
这动图制作漂亮,用在背景变色的代码里,效果更明显

谢谢影子分享支持鼓励。下午好!{:4_204:}

梦江南 发表于 2024-8-1 16:37

红影 发表于 2024-8-1 16:02
歌曲也好听,欣赏梦江南好帖

这个女孩子的眼睛有眨得太快吗?

醉美水芙蓉 发表于 2024-8-1 16:52

醉美水芙蓉 发表于 2024-8-1 16:52

梦油 发表于 2024-8-1 16:59

好浪漫的画面。

梦江南 发表于 2024-8-1 17:30

醉美水芙蓉 发表于 2024-8-1 16:52
眼睛一眨一眨很漂亮!

谢谢醉美水芙蓉老师分享支持,问好!{:4_204:}

梦江南 发表于 2024-8-1 17:31

醉美水芙蓉 发表于 2024-8-1 16:52
欣赏老师带来的精彩!

谢谢,谢谢醉美水芙蓉老师,祝夏日安康!{:4_204:}

梦江南 发表于 2024-8-1 17:32

梦油 发表于 2024-8-1 16:59
好浪漫的画面。

谢谢棼油老师分享支持,问好!{:4_204:}

起个网名好难 发表于 2024-8-1 18:16

太热了,现在就开始呼唤冬天了{:5_106:}

竹溪 发表于 2024-8-1 18:29

漂亮的变色动画,欣赏老师好帖{:4_204:}

红影 发表于 2024-8-1 20:49

梦江南 发表于 2024-8-1 16:35
谢谢影子分享支持鼓励。下午好!

应该谢谢江南带来的好帖才是,给人以美好的感受呢{:4_187:}

红影 发表于 2024-8-1 20:50

梦江南 发表于 2024-8-1 16:37
这个女孩子的眼睛有眨得太快吗?

还好,这样正好看得出来,太慢可能会不注意{:4_173:}

梦江南 发表于 2024-8-2 07:52

起个网名好难 发表于 2024-8-1 18:16
太热了,现在就开始呼唤冬天了

是啊,你那里还要热了!

梦江南 发表于 2024-8-2 07:53

竹溪 发表于 2024-8-1 18:29
漂亮的变色动画,欣赏老师好帖

问好竹溪,谢谢支持,祝夏安!{:4_204:}

梦江南 发表于 2024-8-2 07:54

红影 发表于 2024-8-1 20:49
应该谢谢江南带来的好帖才是,给人以美好的感受呢

谢谢影子分享支持,您的支持是我的最大动力!早上好!{:4_204:}

梦江南 发表于 2024-8-2 07:55

红影 发表于 2024-8-1 20:50
还好,这样正好看得出来,太慢可能会不注意

看看还好,哈哈。{:4_173:}

起个网名好难 发表于 2024-8-2 08:09

梦江南 发表于 2024-8-2 07:52
是啊,你那里还要热了!

熬着呗{:5_156:}
页: [1] 2
查看完整版本: 学习帖【私藏冬日雪】