本帖最后由 花简静 于 2024-2-19 20:35 编辑
<style>
#papa {
margin: 0 0 0 calc(50% - 931px);
position: relative;
width: 1700px;
height: 900px;
top:130px;
background: tan url('https://pic.imgdb.cn/item/65955af0871b83018a5a3805.webp');
background-blend-mode: normal;
border: 3px solid rgba(0,0,200,.6);
border-radius: 12px;
box-shadow: 3px 3px 20px #000;
overflow: hidden;
z-index: 1;
}
.mypic {
position: absolute;
right:0px;
top:0px;
cursor: pointer;
z-index: 3;
}
.mypic1 {
position: absolute;
right:800px;
top:40px;
cursor: pointer;
mix-blend-mode: Multiply;
z-index: 3;
}
#btnplay {
position: absolute;
top: 770px;
left: 690px;
width: 60px;
filter: hue-rotate(220deg) drop-shadow(0 0 2px transparent);
cursor: pointer;
transition: filter .35s ease-in;
z-index: 6;
animation: rotating 5s infinite linear var(--state);
}
#btnplay:hover {
filter: hue-rotate(0) drop-shadow(0 0 30px white);
}
#mydiv {
margin: auto;
width: 1700px;
height: 900px;
z-index: 5;
overflow: hidden;
position: relative;
}
li-zi {
position: absolute;
animation: rot 9s infinite linear var(--state);
}
@keyframes rot { to { transform: rotate(3turn); } }
#vid {
position: absolute;
top: -80px;
width: 100%;
height: 110%;
object-fit: cover;
mix-blend-mode: screen;
filter: opacity(. 10);
z-index: 2;
}
@keyframes rotating {
to { transform: rotate(1turn); }
}
</style>
<div id="papa"><div class="mypic"><img src="https://pic.imgdb.cn/item/65969703871b83018a98ce08.png" alt="" /></div>
<div class="mypic1"><img src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif" alt="" /></div>
<div id="mydiv"></div>
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/01/46/5b438862b52c2.mp4" loop muted></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1903349556" autoplay loop></audio>
<img id="btnplay" src="https://638183.freep.cn/638183/t23/btn/uih.webp" alt="" title="播放/暂停" />
</div>
<script>
(function() {
let canMove = true;
class Lizi {
constructor(pa) {
this.pa = pa;
this.left = 10;
this.top = 1;
this.xstep = 1;
this.ystep = 0;
this.ele = document.createElement('li-zi');
}
creating() {
this.ele.style.cssText = `
left: ${this.left}px;
top: ${this.top}px;
`;
this.pa.appendChild(this.ele);
this.moving();
}
moving() {
if(canMove) {
this.left += this.xstep;
this.top += this.ystep;
if(this.left >= this.pa.offsetWidth) this.left = - this.ele.offsetWidth;
if(this.top >= this.pa.offsetHeight) this.top = -this.ele.offsetHeight;
this.ele.style.left = this.left + 'px';
this.ele.style.top = this.top + 'px';
}
requestAnimationFrame(this.moving.bind(this));
}
}
let stepAr = [0,0.2,0.5,0.8,1,1.2,1.5];
let txtAr = ['❄','❄','❅','❄','❅','❄'];
Array.from({length: 160}).forEach((element) => {
let xIdx = Math.floor(Math.random() * stepAr.length),
yIdx = Math.floor(Math.random() * stepAr.length),
txtIdx = Math.floor(Math.random() * txtAr.length);
element = new Lizi(mydiv);
element.left = Math.ceil(Math.random() * (mydiv.offsetWidth - 50));
element.top = Math.ceil(Math.random() * (mydiv.offsetHeight - 50));
element.xstep = stepAr[xIdx];
element.ystep = stepAr[yIdx];
element.bg = 'none';
element.ele.innerText = txtAr[txtIdx];
element.creating();
element.ele.style.fontSize = 10 + Math.ceil(Math.random() * 26) + 'px';
element.ele.style.color = '#' + Math.random().toString(16).substr(-6);
});
let script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.3.0/css-doodle.min.js';
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.head.appendChild(script);
let mState = () => {
aud.paused ?
(papa.style.setProperty('--state','paused'), vid.pause(),canMove = false) :
(papa.style.setProperty('--state','running'), vid.play(), canMove = true);
};
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
<br><br><br><br><br><br><br><br><br>
| 
发表于 2024-2-9 23:25
发表于 2024-2-9 23:40
发表于 2024-2-10 04:30