玫瑰 发表于 2026-8-5 20:22

【玫瑰。图】中国美


<style>
#mydiv { --width: 1500px; margin: 160px 0 50px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 1000px; background: #eee url('https://img.wyc520.com.cn/data/attachment/forum/202510/29/123845pch6qvv1pczp9hzp.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px rgba(0,0,0,.7); overflow: hidden; z-index: 1; position: relative;}
.ball { position: absolute; width: 120px; height: 120px; background: url(https://bohann.net/data/attachment/forum/202406/30/101325gp6ejqoji9qq4c6z.gif'') no-repeat center/cover; border-radius: 50%; opacity: 1; transition: width .5s, height .5s, opacity .5s; cursor: pointer; offset-path: path('M880 60 Q1940 360,520 520'); offset-distance: 0; animation: 6s linear forwards;}
.ball:hover { width: 45px; height: 45px; opacity: .95; }
.ball:nth-of-type(1) { left: -30px; top: 0; animation-name: move1-1;mix-blend-mode: sereen;opacity: .55;}
.ball:nth-of-type(2) { left: -15px; top: 0; width: 280px; height: 280px;background: url('https://bohann.net/data/attachment/forum/202406/21/150521xfkrs2cx7exwffuk.gif') no-repeat 50%/96%; offset-distance: 50%;mix-blend-mode: screen;}
#vid { position: absolute; width: 100%; height: 110%; top:-80px; object-fit: cover; mix-blend-mode: screen; pointer-events: none; opacity: .65;}
#vid { position: absolute; width: 100%; height: 115%; top:-80px; object-fit: cover; mix-blend-mode: screen; pointer-events: none; opacity: .65;}
@keyframes move1-1 {
        from { offset-distance: 0%; transform: rotate(720deg); filter: hue-rotate(0); }
        to { offset-distance: 50%; transform: rotate(0); filter: hue-rotate(360deg); }
}
@keyframes move1-2 {
        from { offset-distance: 50%; transform: rotate(0); filter: hue-rotate(360deg); }
        to { offset-distance: 0%; transform: rotate(720deg); filter: hue-rotate(0); }
}
@keyframes move2-1 {
        from { offset-distance: 50%; transform: rotate(720deg); filter: hue-rotate(0deg); }
        to { offset-distance: 100%; transform: rotate(0); filter: hue-rotate(360deg); }
}
@keyframes move2-2 {
        from { offset-distance: 100%; transform: rotate(0); filter: hue-rotate(360deg); }
        to { offset-distance: 50%; transform: rotate(720deg); filter: hue-rotate(0); }
}
#lrc{left: 15%;top: 80%;}#lrcc {right:15%;top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position: absolute;z-index: 2;font:normal 3em 华文隶书;color: #000078;white-space: pre;-webkit-background-clip: text;z-index: 20;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background:repeating-linear-gradient(to right, #ff0000, lightgreen, snow, lightgreen, orange) 50%/200px 60px,var(--bg); -webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=552312473.mp3 " autoplay="" loop=""></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2916847/00/17/69/5ecce43911f1f.mp4
" autoplay="" loop="" muted=""></video>

        <div id="b1" class="ball"></div>
        <div id="b2" class="ball"></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>

</div>

玫瑰 发表于 2026-8-5 20:23

中国美

玫瑰 发表于 2026-8-5 20:23

悠久的美

玫瑰 发表于 2026-8-5 20:23

辽阔的美

玫瑰 发表于 2026-8-5 20:24

豪迈的美

玫瑰 发表于 2026-8-5 20:24

{:4_204:}{:4_204:}{:4_204:}

红影 发表于 2026-8-5 20:42

这背景图是怎么处理的，好奇妙啊{:4_187:}

玫瑰 发表于 2026-8-5 20:44

红影 发表于 2026-8-5 20:42
这背景图是怎么处理的，好奇妙啊

有些背景选择的。{:4_204:}

红影 发表于 2026-8-5 21:55

玫瑰 发表于 2026-8-5 20:44
有些背景选择的。

嗯嗯，非常漂亮的背景呢{:4_187:}

玫瑰 发表于 2026-8-5 21:57

红影 发表于 2026-8-5 21:55
嗯嗯，非常漂亮的背景呢

灌水第一喜欢
制作音画第二喜欢
唱歌第三喜欢
写诗第四喜欢
页: [1]
查看完整版本: 【玫瑰。图】中国美