用css html JavaScript 写一个鲜花绽放逼真的代码要求在500*500px的盒子中
时间: 2023-06-13 12:08:35 浏览: 53
以下是一个基本的鲜花绽放效果的代码,使用了CSS3的transition和animation动画效果,JavaScript控制花瓣的数量和位置,可以在500*500px的盒子中实现:
HTML代码:
```html
<div class="flower"></div>
```
CSS代码:
```css
.flower {
width: 300px;
height: 300px;
background: url("https://cdn.pixabay.com/photo/2017/02/24/12/22/flower-2090641_1280.png") no-repeat center center;
background-size: 100%;
position: relative;
overflow: hidden;
}
.flower .petal {
position: absolute;
width: 20px;
height: 20px;
background: url("https://cdn.pixabay.com/photo/2017/02/24/12/22/flower-2090641_1280.png") no-repeat center center;
background-size: 100%;
transition: all 0.5s ease-out;
animation: petal-fall 5s ease-out infinite;
}
@keyframes petal-fall {
0% {
transform: translateY(-100%) rotate(0deg);
}
100% {
transform: translateY(100%) rotate(360deg);
}
}
.flower .petal:nth-child(1) {
top: 20%;
left: 15%;
transform: rotate(45deg);
}
.flower .petal:nth-child(2) {
top: 20%;
right: 15%;
transform: rotate(-45deg);
}
.flower .petal:nth-child(3) {
bottom: 20%;
left: 15%;
transform: rotate(-45deg);
}
.flower .petal:nth-child(4) {
bottom: 20%;
right: 15%;
transform: rotate(45deg);
}
```
JavaScript代码:
```javascript
var flower = document.querySelector(".flower");
// 花瓣数量
var petalCount = 4;
// 循环创建花瓣
for (var i = 1; i <= petalCount; i++) {
var petal = document.createElement("div");
petal.className = "petal";
flower.appendChild(petal);
}
```
将以上代码复制到HTML、CSS、JavaScript文件中即可。