与春光共舞,独属于开发者们的春日场景是什么样的?
春天怎么少的了樱花雨呢?大家感兴趣可以自己运行代码看一下哦
html>
head>
style>
.sakura-container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background: linear-gradient(to bottom, #bde0fe 0%, #ffc8dd 100);
}
.petal {
position: absolute;
width: 12px;
height: 12px;
background: radial-gradient(circle at 30% 40%, #ffb3c1, #ff758f);
clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 50% 100%, 0 35%, 20% 10%);
animation: fall 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
will-change: transform; /* 性能优化 */
}
@keyframes fall {
0% {
transform: translate3d(0, -50vh, 0) rotateZ(0deg);
opacity: 0.8;
}
100% {
transform: translate3d(20vw, 110vh, 0) rotateZ(360deg);
opacity: 0;
filter: blur(2px);
}
}
/* 悬停效果 */
.petal:hover {
animation-play-state: paused;
transform: rotateZ(var(--rotate)) scale(1.2);
transition: all 0.3s ease;
}
@media (hover: none) {
.petal:hover {
animation-play-state: running !important;
}
}
style>
head>
body>
div class='sakura-container' id='container'>div>
script>
// 创建花瓣
function createPetals() {
const container = document.getElementById('container');
for(let i = 0; i 80; i++) {
const petal = document.createElement('div');
petal.className = 'petal';
// 初始随机位置
petal.style.left = Math.random() * 100 + '%';
petal.style.animationDelay = Math.random() * 5 + 's';
// 预定义旋转角度变量
petal.style.setProperty('--rotate', '0deg');
container.appendChild(petal);
}
}
// 悬停交互
document.getElementById('container').addEventListener('mouseover', function(e) {
if(e.target.classList.contains('petal')) {
// 生成-30°到30°的随机旋转
const rotateVal = (Math.random() * 60 - 30) + 'deg';
e.target.style.setProperty('--rotate', rotateVal);
}
});
// 初始化
window.addEventListener('DOMContentLoaded', createPetals);
script>
body>
html>
赞15
踩0