【玫瑰。图】我在四季中等你
本帖最后由 玫瑰 于 2026-8-11 19:35 编辑 <br /><br /><style>#mydiv { --width: 1400px; margin: 130px 0 50px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 1800px; background: #eee url('https://img.wyc520.com.cn/data/attachment/forum/202608/11/193053xuudtu5yncddbz39.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://642303.freep.cn/642303/za/shuijing300.png') 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://642303.freep.cn/642303/za/38477af75a9245ae9a27fb2a3fb33efa_tplv-obj_500_500.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.1" autoplay="" loop=""></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/17/43/5ec47726d7a6a.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-11 19:53 编辑 <br /><br />
<div align="center"><audio style="width: 250px; height: 40px;" src="http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=44ZO9ic4FlZQVcfn&shareuid=639c9d86272e3f893c49&shareDescABType=1&topsource=a0_pn201001004_z11_u1103238287_l1_t1786448846__&pageId=details_of_creations" autoplay="autoplay" loop="loop" controls="controls" type="audio/mpeg"></audio> 本帖最后由 玫瑰 于 2026-8-11 19:35 编辑
https://img.wyc520.com.cn/data/attachment/forum/202608/11/193053xuudtu5yncddbz39.jpg 既然找到这个图{:4_204:} 问好玫瑰，没有音乐? 这张图很可爱， 没有音乐 来欣赏精品佳作！
制作大气！ 梦江南 发表于 2026-8-11 18:28
问好玫瑰，没有音乐?
我在弄了{:4_204:} 偶然~ 发表于 2026-8-11 19:01
来欣赏精品佳作！
制作大气！
换了一种图片，这题目会更好。{:4_204:} 偶然~ 发表于 2026-8-11 19:01
没有音乐
有了刚弄好，刚才去吃饭了{:4_189:} 这播放器真有趣，还是从外飘过来的小球。只是无法在画面上点击暂停呢。
欣赏玫瑰好帖{:4_187:}
页:
[1]