轻风约 发表于 2022-11-11 16:49:52

傻得很潇洒 送给虎妞


<style>
#papa { left: -410px; width: 1400px; height: 750px; top:150px;background:url('https://wj.zp68.com/lxx/yunhua/2022/11/02/GIF.jpg')0 0/100% 100%;display: grid;center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; user-select: none; overflow: hidden; z-index: 1; --opt: .25; }
#btnplay {position: absolute;
        width: 1400px;
        height: 710px;
        left: 0px;
        bottom: 0px;
        -border: 2px solid #000000;
        background: url('https://wj.zp68.com/lxx/yunhua/2022/11/02/sx.png')0 0/100% 100%;
        mask: radial-gradient(transparent 7px,#red 0);
        -webkit-mask: radial-gradient(transparent 7px,red 0);
        -border-radius: 50%;
        cursor: pointer;
        -animation: rot 4s linear infinite;
        -z-index: 0;
        -transform: rotateX(45deg) rotateY(20deg) rotate(0deg);}

#lrc { --motion: cover1; --tt: 1s; --state: paused; position: absolute; top: 100px;left: 700px;color: #000080; font-family: 汉仪雪峰体简;
        font-size: 45px;-webkit-background-clip: text; filter: drop-shadow(#ffffff 2px 0 0)drop-shadow(#ffffff 0 2px 0)drop-shadow(#ffffff -2px 0 0) drop-shadow(#ffffff 0 -2px0); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap;background: repeating-linear-gradient(275deg, #db0909 0%,#6003fa 100%);-webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }


#tx { position: absolute;
        top: 0px;
        left: 0px;
        width: 200px;
        height: 700px;
        animation: tx 0.25s linear infinite;
        cursor: pointer;
        opacity: 1; }

@keyframes tx {
to {filter:hue-rotate(360deg)contrast(100%)brightness(150%);}
}

</style>
<style>
.img_border{display:inline-block;width:1400px;height:750px;margin:0px ;position: absolute;}
.img_border #aplay{border:1px solid #000000;border-radius:0%; }
.z360z{animation: rotating 0s linear infinite;background:url('https://wj.zp68.com/lxx/yunhua/2022/11/02/GIF.gif')0 0/100%100%;}@keyframes rotating{from {filter:hue-rotate(0deg)contrast(120%)brightness(110%);}to {filter:hue-rotate(60deg)contrast(110%)brightness(100%);}}
</style>
<div id="papa"><div id="tx">
<div class="img_border" id="aplay" style="width: 1400px; height: 750px;position: absolute;">
<img id="tupian" style="width: 100%; height: 100%;background: url()0 0/100% 100%"></div></div>
<span id="btnplay" style="animation-play-state: running;"></span>
   <span id="lrc" data-lrc="帖赠:虎妞" style="--state:running; --motion:cover1; --tt:9.1s;">帖赠:虎妞</span>
</div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2022/10/17/ssdxs.mp3" autoplay="autoplay"></audio>

<script>
(function() {
      let mKey = 0, mFlag = true, slip = 0.0;
   let lrcAr = [
                ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
];
      aud.loop = false;
      btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
      aud.addEventListener('pause', () => mState());
      aud.addEventListener('play', () => mState());
      aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
      aud.addEventListener('timeupdate', () => {
                for (j = 0; j < lrcAr.length; j++) {
                        if (aud.currentTime - slip >= lrcAr) {
                              if (mKey === j) showLrc(lrcAr);
                              else continue;
                        }
                }
      });

let mState = () => aud.paused ? (btnplay.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.animationPlayState = 'running',

lrc.style.setProperty('--state', 'running'));
      let showLrc = (time) => {
                let name = mFlag ? 'cover1' : 'cover2';
                lrc.innerHTML = lrc.dataset.lrc = lrcAr;
                lrc.style.setProperty('--motion', name);
                lrc.style.setProperty('--tt', time + 's');
                lrc.style.setProperty('--state', 'running');
                mKey += 1;
                mFlag = !mFlag;
      };
})();


</script>

<script type="text/javascript">
var my_audio =document.getElementById("aud");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function(){document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc); </script>


<br></div><br><br><br><br><br><br><br><br><br>

轻风约 发表于 2022-11-11 16:51:09

妞。。。。。。偷个帖送你 这个感觉合适你手机,直接点击画面音乐停止,再点击就出来

轻风约 发表于 2022-11-11 16:52:09

身体咋样?保重{:4_369:}

轻风约 发表于 2022-11-11 16:52:37

有没有想我{:2_197:}

虎妞 发表于 2022-11-11 20:56:29

轻风约 发表于 2022-11-11 16:51
妞。。。。。。偷个帖送你 这个感觉合适你手机,直接点击画面音乐停止,再点击就出来

看傻了,听傻了,听好几遍了,忘回帖了{:2_224:}

虎妞 发表于 2022-11-11 20:58:34

轻风约 发表于 2022-11-11 16:51
妞。。。。。。偷个帖送你 这个感觉合适你手机,直接点击画面音乐停止,再点击就出来

真会选歌儿,就知道我会喜欢是吧{:2_197:}

虎妞 发表于 2022-11-11 21:01:36

哥们儿每个帖子做的都很高大上,创意十足,养眼养心,{:2_196:}

虎妞 发表于 2022-11-11 21:02:42

轻风约 发表于 2022-11-11 16:52
身体咋样?保重

我身体挺好的,放心吧,你也多保重哈!

虎妞 发表于 2022-11-11 21:03:38

轻风约 发表于 2022-11-11 16:52
有没有想我

放心,我就是不想我自己,都忘不了想你{:2_197:}

虎妞 发表于 2022-11-11 21:05:00

轻风约 发表于 2022-11-11 16:52
有没有想我

艾玛,感动加激动的忘说谢谢了,哼哼哼,压根就没想谢{:2_197:}
页: [1] 2 3 4 5
查看完整版本: 傻得很潇洒 送给虎妞