姚云裳 发表于 2024-3-18 09:21:29

【云裳单图】旧时光


<style>
#mydiv {
    margin: 0 0 0 calc(50% - 750px);
    position: relative;
    width: 1500px;
    height: 800px;
    background: url('https://pic.imgdb.cn/item/65db2b839f345e8d03dfbd1e.jpg') no-repeat center/cover;
    box-shadow: 3px 3px 8px gray;
    overflow: hidden;
}
#mydiv::before {
    position: absolute;
    content: '';
    inset: 0;
    background: repeating-linear-gradient(transparent, green 2px) repeat;
    opacity: .45;
    animation: up 10s ease-in-out infinite alternate var(--state);
}
#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-linear-gradient(60deg, transparent, orange 20px);
    background-clip: text;
    -webkit-background-clip: text;
    clip-path: inset(0 100% 0 0);
    animation: var(--ani) var(--duration) linear forwards var(--state);
}
#btnplay {
    position: absolute;
    right: 20px;
    bottom: 10px;
    width: 200px;
    height: 200px;
    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: 0% 100%;
    background: linear-gradient(snow, orange, green);
    transform-origin: 50% 100%;
    transform: rotate(var(--deg));
}
@keyframes up {
    0% { inset: 0; }
    25% { inset: 50% 0 50% 0; }
    50% { inset: 0; }
    75% { inset: 0 50% 0 50%; }
    100% { inset: 0; }
}
@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="mydiv">
    <audio src="https://music.163.com/song/media/outer/url?id=2010357712" 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.js';
document.querySelector('body').appendChild(sF);

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

庶民 发表于 2024-3-18 09:25:05

很有吸引力

醉梦无痕 发表于 2024-3-18 10:10:57

欣赏佳作，问候云裳。

红桔子 发表于 2024-3-18 21:36:53

欣赏云裳美做，精彩视频，大气高端上档次

红桔子 发表于 2024-3-18 21:38:11

那播放器是一朵美丽的花，非常增色

姚云裳 发表于 2024-3-18 23:36:49

谢谢欣赏，问好
页: [1]
查看完整版本: 【云裳单图】旧时光