小辣椒 发表于 2024-9-16 16:01

追不上的青春


<style>
.hy {
        margin: 140px 0 30px calc(50% - 778px);
        width: 1369px;
        height: 751px;
        box-sizing: border-box;
        border: 3px solid;
        border-image: linear-gradient(to top right,#a506d9, #0b3c2e) 3 3;
               
        background: url('https://wj.zp68.com/lxx/yunhua/2024/06/22/01.jpg')


no-repeat center/cover;
        z-index: 1; overflow: hidden;
        pointer-events: none;
        position: relative;
}

.hy::before, .hy::after {
       position: absolute;
       content: '';
       transition: all .45s;
}
.hy::before {
        inset: 0;
        background: rgba(255, 255, 255, 0.35);
        backdrop-filter: hue-rotate(var(--hue));
}
.hy::after {
        right: 45%;
        bottom: 40px;
        width: 100px;
        height: 100px;
        background: url('https://wj.zp68.com/lxx/yunhua/2024/06/22/an.png') no-repeat center/cover;
        transform: rotate(var(--hue));
        pointer-events: auto;
        cursor: pointer;
}


.vid { position: absolute; object-fit: cover; }
.vid:nth-of-type(1) {       
        top: 68%;
        right: 6%;
        width: 350px;               
        height: 200px;
        border-radius: 25%;        
        border: 4px solid #3b5c76;
}
.vid:nth-of-type(2) { top: -70px; right: -10px; width: 100%; height: 110%; mix-blend-mode: screen; opacity: .95; z-index: 10;}
.hy:hover::before { backdrop-filter: unset; }

#tit {
      position: absolute;   
      top: -15px;
      background-image:url('https://xlaj.cn/assets/file/zp/20240118150805.gif '); background-size:cover;
      width:350px; height:200px; left: 40px; font: bold 2.2em 微软雅黑; serif;
      text-align:center; line-height:200px; color:transparent;
      -webkit-background-clip:text;
      solid; z-index: 10;
}
#tit2 {
      position: absolute;   
      top: 40px;
      background-image:url('https://xlaj.cn/assets/file/zp/20240118150805.gif'); background-size:cover;
      width:250px; height:120px; left: 100px; font: bold 1.8emserif;
      text-align:center; line-height:200px; color:transparent;
      -webkit-background-clip:text;
      border:0px #FF4A20 solid; z-index: 10;
}

</style>

<div class="hy" id="hy1">

<div id="tit">追不上的青春</div>

<div id="tit2">Give it to yourself</div>

        <audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2024/06/22/zbsqc.mp3" autoplay loop></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/42/29/601b3dbaae8ae.mp4" autoplay loop muted></video>
        <video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/92/5e67af3447155.mp4" autoplay loop muted></video>
</div>

<script>
var vids = hy1.querySelectorAll('.vid'); //视频变量
var mState = () => {
        hy1.title = ['暂停','播放'][+aud.paused];
        vids.forEach(vid => aud.paused ? vid. pause() : vid.play());
};

aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => hy1.style.setProperty('--hue', Math.floor(Math.random() * 360) + 'deg');
hy1.onclick = () => aud.paused ? aud.play() : aud.pause();

</script>
<br><br><br><br><br>

liumang 发表于 2024-9-16 23:54

漂亮，变色效果加视频效果{:5_150:}{:5_150:}{:5_150:}

liumang 发表于 2024-9-16 23:54

小辣椒辛苦了，感谢分享{:5_124:}
页: [1]
查看完整版本: 追不上的青春