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

【云裳单图】旧时光

<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 18:11:26

旧时光，如梦如烟，
岁月匆匆，逝去无痕。
曾经沧海难为水，
除却巫山不是云。

青石板路，苔藓斑驳，
古巷深深，幽深如画。
夕阳西下，断肠人在天涯，
思念如风，吹过四季。

旧照片里，笑颜如花，
青春年少，热血沸腾。
岁月无情，青春易老，
留下回忆，温暖心房。

旧时光，如诗如画，
琴瑟相伴，共度流年。
曾经美好，永远难忘，
留下足迹，伴我成长。

心络羽儿 发表于 2024-3-18 19:42:59

美美哒旧时光，加了特效更是好看{:1_1558:}

姚云裳 发表于 2024-3-18 23:01:39

谢谢欣赏，问好

青依。 发表于 2024-3-19 13:32:06

欣赏学习云裳老师的精彩。。{:1_1320:}

青依。 发表于 2024-3-19 13:32:34

特效很漂亮，旧旧的时光里。。。

青依。 发表于 2024-3-19 13:32:55

意境满满的，赞了赞了

只道寻常 发表于 2024-3-19 14:33:14

这色调棒棒的，好看~小特效也很有特色呢~

飞沫 发表于 2024-3-21 09:35:23

这图色是满满的旧时光。

特效很吸睛，学习。{:1_1467:}

姚云裳 发表于 2024-3-21 12:44:48

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