悬浮
<style>
#papa { margin: 0 0 0 calc(50% - 633px); display: grid; place-items: center; width: 1100px; height: 700px; background: lightblue; box-shadow: 3px 3px 20px #000; overflow: hidden; transition: background-size .75s; position: relative; z-index: 1; }
#papa::before { position: absolute; content: ''; inset: 0; transition: .75s; background: url('https://pic.imgdb.cn/item/65e9ba799f345e8d038303d9.gif') no-repeat center/cover; }
#papa:hover::before { transform: scale(1.2); }
#papa:fullscreen::before { transform: unset; }
#lrc { position: absolute; top: 20px; font: bold 2.4em sans-serif; color: silver; text-shadow: 1px 1px 1px rgba(0,0,0,.75); --ani: lrcGo1; --duration: 1s; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: rgba(0,100,100,.2); background: linear-gradient(to bottom, rgba(10,200,10,.35), rgba(0,100,200,.8)); background-clip: text; -webkit-background-clip: text; clip-path: inset(0 100% 0 0); animation: var(--ani) var(--duration) linear forwards var(--state); }
#mplayer { position: absolute; left: 52%; bottom: 10px; text-align: center; color: lightblue; }
#mplayer::before { position: absolute; content: attr(data-tt); left: 0; bottom: 25px; width: 100%; text-align-last: justify; }
#mprog { width: 280px; accent-color: snow; outline: none; cursor: pointer; }
#mprog:focus { accent-color: lightblue; }
#btnplay { width: 50px; height: 50px; cursor: pointer; animation: rotating 6s infinite linear var(--state); }
#btnplay:hover { filter: invert(.2); }
#btnFs { position: absolute; left: 38%; bottom: 10px; color: silver; background: none; opacity: 0; border: 2px solid silver; border-radius: 6px; padding: 4px; transition: all .75s; cursor: pointer; z-index: 100; }
#papa video { position: absolute; bottom: 0; width: 100%; height: calc(100% + 100px); object-fit: cover; mix-blend-mode: soft-light; pointer-events: none; }
@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); } }
@keyframes move { to { offset-distance: 100%; } }
</style>
<div id="papa">
<audio src="https://music.163.com/song/media/outer/url?id=241286"></audio>
<video src="https://img.tukuppt.com/video_show/2269348/00/14/66/5e5a2fd36a145.mp4" muted loop></video>
<div id="mplayer" data-tt="0:00 0:00">
<img id="btnplay" src="https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.png" title="播放/暂停" alt="" /><br>
<input id="mprog" type="range" min="0" max="100" step="any" value="0" title="调节进度" />
</div>
<div id="btnFs">全屏观赏</div>
<div id="lrc" data-lrc="HuaChao LRC">HuaChao LRC</div>
</div>
<script>
var geci = [ ];
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/rangelrc_fs.js';
document.querySelector('body').appendChild(sF);
</script> 这瑜伽都练到水上了，这能耐，也没谁了 厉害了 看得笑，这悬浮里还有很多生活气息啊，有做蛋糕的烤蛋糕纸杯，还有鸡蛋和打蛋器，和美女一起悬浮在意境背景里，给人以很奇妙的感受{:4_199:} 音乐好听，字体也很有立体感。欣赏清舟好帖{:4_199:} 马黑黑 发表于 2024-3-10 12:20
这瑜伽都练到水上了，这能耐，也没谁了
这才是真功夫的嘛 红影 发表于 2024-3-10 15:24
看得笑，这悬浮里还有很多生活气息啊，有做蛋糕的烤蛋糕纸杯，还有鸡蛋和打蛋器，和美女一起悬浮在意境背景 ...
梦里做蛋糕了{:4_189:} 清舟作业又快又好，大才女{:4_199:} 图图意境美美的，图图不复杂，中心意思一看就晓得，黑黑都直接说出来了（这瑜伽都练到水上了，这能耐，也没谁了）{:4_173:} 欣赏清舟精彩的制作，赞~{:4_178:} 小辣椒 发表于 2024-3-10 19:50
图图意境美美的，图图不复杂，中心意思一看就晓得，黑黑都直接说出来了（这瑜伽都练到水上了，这能耐，也没 ...
正好听到这首音乐，想起这个效果就整来了 绿叶清舟 发表于 2024-3-10 19:52
正好听到这首音乐，想起这个效果就整来了
就是聪明{:4_178:} 绿叶清舟 发表于 2024-3-10 19:45
这才是真功夫的嘛
估计只有你这样的才练得出来 绿叶清舟 发表于 2024-3-10 19:46
梦里做蛋糕了
味道一定很香甜{:4_173:} 马黑黑 发表于 2024-3-10 20:06
估计只有你这样的才练得出来
现在知道厉害了吧{:4_189:} 红影 发表于 2024-3-10 20:42
味道一定很香甜
都香醒了{:4_189:} 绿叶清舟 发表于 2024-3-10 20:50
都香醒了
醒了一动就没法悬浮了，还是别动的好{:4_173:} 绿叶清舟 发表于 2024-3-10 20:49
现在知道厉害了吧
还不差 红影 发表于 2024-3-10 21:37
醒了一动就没法悬浮了，还是别动的好
直接床底下去了{:4_189:} 马黑黑 发表于 2024-3-10 21:39
还不差
差远了
页:
[1]
2