最最美好的夏天（马黑黑原创）
本帖最后由 朵拉 于 2024-8-3 20:21 编辑 <br /><br /><style>#mydiv {
margin: 130px 0 30px calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://pic.imgdb.cn/item/66ae1e3ad9c307b7e9da3d12.webp') no-repeat center/cover;
box-shadow: 2px 3px 6px rgba(0,0,0,.6);
overflow: hidden;
z-index: 1;
pointer-events: none;
position: relative;
}
#mydiv::before, #mydiv::after { position: absolute; content: ''; }
#mydiv::after {
left: calc(50% - 60px);
top: 20px;
width: 120px;
height: 120px;
background: url('https://638183.freep.cn/638183/small/snow.webp') no-repeat center/cover;
pointer-events: auto;
cursor: pointer;
animation: rot 8s linear infinite var(--state);
}
#mydiv::before {
bottom: 120px;
content: url('https://638183.freep.cn/638183/small/boat.gi');
-webkit-mask: radial-gradient(circle, red,transparent);
opacity: .9;
}
li-zi {
position: absolute;
left: calc(50% - 5px);
bottom: 0;
width: 10px;
height: 10px;
border-radius: 0 60%;
box-shadow: inset 0 0 10px bule;
animation: fly 6s linear infinite var(--state);
}
@keyframes fly { to { transform: translate(var(--xx), var(--yy)) rotate(var(--deg)); } }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2060686795" autoplay loop></audio>
</div>
<script>
Array.from({length: 100}).forEach(lz => {
lz = document.createElement('li-zi');
var idx = Math.random() > 0.5 ? 1 : -1;
lz.style.cssText += `
background: #${Math.random().toString(16).substring(2,8)};
animation-delay: -${Math.floor(Math.random() * 6)}s;
--xx: ${idx * Math.random() * 1000}px;
--yy: ${Math.random() * -800}px;
--deg: ${Math.random() * 720}deg;
`;
mydiv.appendChild(lz);
});
aud.oncanplay = aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
@马黑黑
老师 晚上好，学生交作业，请指正哈{:4_190:} 漂亮，欣赏朵宝好帖{:4_187:} {:4_199:} 朵拉每次作业都在小辣椒前面的，完成作业的速度杠杠的{:4_199:} 欣赏朵拉的精彩制作{:4_171:}
页:
[1]