亚伦影音工作室 发表于 2023-10-30 22:20

看看这些下落的雨珠像不？

本帖最后由 亚伦影音工作室 于 2023-10-31 04:07 编辑 <br /><br /><style>
#papa { margin: 10px -300px ; width: 1164px; height: 640px; background:#333 url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/993e607fffcea845ea4f5e54706f8e42_preview.jpg') no-repeat center/cover;   position: relative;place-items: center; z-index: 10000; overflow:hidden;}
#bs{ position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;z-index: 1;
        height: 100%;
        animation: sb 1s linear infinite;
       
        opacity: 1;
}
@keyframes sb {
    0%{ background:#000080;mix-blend-mode:overlay;
      filter:hue-rotate(360deg)
    }

100%{background:linear-gradient(45deg, #ff0000 , #000080, #00f000);mix-blend-mode: difference;
      filter:hue-rotate(0deg)
    }
}

#mpic { position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;z-index: 1;
        height: 100%;
        animation: fly 150s linear infinite;
        cursor: pointer;mix-blend-mode:lighten;
        opacity: 0;
}
#mpicc { position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;z-index: 1;
        height: 100%;
        animation: tot 200s linear infinite;
        cursor: pointer;mix-blend-mode:lighten;
        opacity: 1;
}

@keyframes fly {0%{
      background-position: 0% 0;
    }
    100%{
      background-position: 0% -200%;filter:hue-rotate(360deg)
    }
}
@keyframes tot { 0%{
      background-position: 0% 0%;
    }
    100%{
      background-position: 0% -200%;filter:hue-rotate(360deg)
    }
}
#img_border{top:85%; left:85%;z-index: 36;
position: absolute;
font: normal 7em/0em serif;
color:#ff0000;
cursor: pointer;
animation: spin 10s infinite linear;
}
@keyframes spin {0% { transform: rotate(360deg); }
}

</style>
<div id="papa">
<div id="bs"></div>
<imgid="mpic"style="background: url('https://pic.imgdb.cn/item/653fbaf4c458853aefb716e6.png')0 0/650px 1620px" >
<imgid="mpicc"style="background: url('https://pic.imgdb.cn/item/653fbaf4c458853aefb716e6.png')0 0/650px 1620px" >
<div id="img_border">❊</div>
<audio src="https://p4.t57.cn:8399/2019/jy/0/MKE.m4a" loop autoplay id="aud"></audio>
</div>
<script>
img_border.addEventListener('click', () => { aud.paused ? aud.play() : aud.pause(); });
img_border.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>img_border.style.animationPlayState = 'paused');
bs.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>bs.style.animationPlayState = 'running');
aud.addEventListener('pause', () => bs.style.animationPlayState = 'paused');

mpic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mpic.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mpic.style.animationPlayState = 'paused');


mpicc.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mpicc.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mpicc.style.animationPlayState = 'paused');

</script>

红影 发表于 2023-10-30 23:29

水滴很像，只是这些闪动太快了，看得有点头晕{:4_173:}

红影 发表于 2023-10-30 23:30

一键全控，这个厉害了。给亚伦老师点赞{:4_187:}
页: [1]
查看完整版本: 看看这些下落的雨珠像不？