朵拉 发表于 2024-2-27 20:48

负罪感（马黑黑原创）

本帖最后由 朵拉 于 2024-2-27 21:10 编辑 <br /><br /><style>
#papa { margin: 30px 0 30px calc(50% - 681px); width: 1200px; height: 575px; background: url('https://pic.imgdb.cn/item/65dddaf59f345e8d03a1719a.jpg') no-repeat center/cover, url('https://638183.freep.cn/638183/Pic/81/leaf2.png') no-repeat 760px 100%, url('https://638183.freep.cn/638183/small/rose.jpg') no-repeat 0 110%; background-blend-mode: darken; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#lrc { position: absolute; left: 20px; top: 10px; font: bold 2.4em sans-serif; color: gray; text-shadow: 1px 1px 1px rgba(0,0,0,.45); --ani: lrcGo1; --duration: 1s; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; background: repeating-radial-gradient(orange, gray 6px); background-clip: text; -webkit-background-clip: text; clip-path: inset(0 100% 0 0); animation: var(--ani) var(--duration) linear forwards var(--state); border-bottom: 2px dashed gray; }
#btnplay { position: absolute; top: 90px; left: 100px; width: 200px; height: 200px; opacity: .7; animation: rotating 6s linear infinite var(--state); cursor: pointer; }
ye-zi { position: absolute; left: calc(50% - 0.5 * var(--ww)); top: 0; width: var(--ww); height: 100px; border-radius: 60%; background: repeating-radial-gradient(gray, tan 20%); transform-origin: 50% 100%; transform: rotate(var(--deg)); }
@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes lrcGo0 { to { clip-path: inset(0 0 0 0); } }
@keyframes lrcGo1 { to { clip-path: inset(0 0 0 0); } }
</style>

<div id="papa">
    <audio src="http://www.kumeiwp.com/sub/filestores/2023/11/14/e750c63173972be3849116af87f70d79.mp3" autoplay loop></audio>
    <div id="lrc" data-lrc="HUACHAO LRC">HUACHAO LRC</div>
    <div id="btnplay"></div>
</div>

<script>
var geci = [ ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ];
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/btnlrc-01.js';
document.querySelector('body').appendChild(sF);

Array.from({length: all = 5}).forEach((item,key) => {
    item = document.createElement('ye-zi');
    item.style.cssText += `--ww: 60px; --deg: ${360 / all * key}deg;`;
    btnplay.prepend(item);
});
</script>

朵拉 发表于 2024-2-27 21:12

@马黑黑
老师 晚上好，学生手机制作帖子看不全，
如有不妥之处，请指正哈~~{:4_190:}

红影 发表于 2024-2-27 21:15

漂亮，欣赏朵宝好帖{:4_204:}

小辣椒 发表于 2024-2-27 21:44

朵拉也是速度的{:4_199:}

小辣椒 发表于 2024-2-27 21:44

感谢分享，朵拉制作辛苦了{:4_171:}

三月的阳光 发表于 2024-2-27 22:20

漂亮~~{:4_171:}

马黑黑 发表于 2024-2-27 22:45

不错不错{:4_199:}

樵歌 发表于 2024-2-28 07:49

瘦机能制作成这样漂亮，也是不易了！
页: [1]
查看完整版本: 负罪感（马黑黑原创）