听——张杰(学习黑师音符播放效果)
位置:
首页 >
悄然作业[ 发布时间: 2023.4.22 作者: 花飞飞 阅读: 234 ]
:doodle { @grid: 4 / 300px; background: url('https://pic1.imgdb.cn/item/6443cd140d2dde57774ffc2c.gif') no-repeat 0px 50px / 260px 260px; cursor: pointer; position: absolute; left: 350px; top: 260px; --state: paused; mix-blend-mode: screen;opacity: .95; } :doodle(:hover) { transform: skew(5deg); } position: absolute; @place-cell: 100px 53%; :after { content: @p(♫,♪,♩,♬,♫,♪,♩,♬,♬,♫,♪,♩); color: @p(red,pink,orange,green,blue,white); } animation: fly 1s @r(-2,2)s infinite var(--state); @keyframes fly { from { transform: rotate(30deg) translate(30px); } to { transform: rotate(@r(-150,150)deg) translate(110px); } }
前一篇: 彩虹的微笑(学习黑师曙光彩虹桥效果)
下一篇: 星河万里(学习黑师流星雨播放效果)
发表评论:
评论列表 [2条]
#2 | 马黑 于 2023-4-22 23:58 发布: 设计非常独到、精妙,即便是播放器也纳入了自己预期的样式
#1 | 悄然 于 2023-4-22 20:57 发布: 这个么,最近刷手机老听到这首歌,就听一听吧。酷美找的音源,歌词就没做了。。