安静听雨2016 发表于 2024-5-17 22:20

【静。单图】东风破

<style>
#papa { margin: 20px 0 20px calc(50% - 970px); width: 1800px; height: 980px; top:130px;background: url('http://bohann.net/data/attachment/forum/202405/14/195247gnh0tsm11b1kdzs5.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
.mypic { position: absolute; cursor: pointer; animation: rot var(--du) infinite linear var(--state); }
.mypic:nth-of-type(1) { left: 390px; top: 300px; width: 50px; mix-blend-mode: hard-light;filter: opacity(.8); --du: 6s; }
.mypic:nth-of-type(2) { right: 300px; top: 200px; filter: opacity(.8) blur(.5px); --du: 10s; }
.mypic:nth-of-type(3) { width: 120px; right: 300px; top: 200px; filter: opacity(.9) brightness(1.2); --du: 4s; }
@keyframes rot { to { transform: rotate(360deg); } }
#vid {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: .65;
    top:-100px;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
}
</style>

<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/59/5b46b86e6c5bf.mp4" autoplay loop muted></video>
    <audio src="http://link.hhtjim.com/kw/60444732.mp3" loop autoplay></audio>
    <img class="mypic" src="000" alt="" />
    <img class="mypic" src="000" alt="" />
    <img class="mypic" src="000" alt="" />
</div>

<script>
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);

sFile.onload = () => {
    LRC({
      papa: '#papa',
      lrcAr: geci,
      btn: '.mypic',
      lrc_css: 'left: 50%; transform: translate(-50%);--bg: linear-gradient(rgba(250,250,250,.25),rgba(95,158,160.65)); position: absolute;opacity: .85; bottom: 20px; font: bold 1.8em sans-serif; color: #F0F8FF;',
    });
};
let geci = [

   
var btns = document.querySelectorAll('.mypic');
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
btns.forEach(btn => btn.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>
<br><br><br><br><br><br><br><br>

诺北 发表于 2024-5-20 12:36

这图做的挺有感觉

么念 发表于 2024-5-27 14:39

漂亮精彩，欣赏点赞
页: [1]
查看完整版本: 【静。单图】东风破