html+css+js两朵会动的花
时间: 2023-06-29 07:16:46 浏览: 41
以下是一个简单的 HTML + CSS + JS 制作的两朵会动的花:
HTML:
```html
<div class="flower-container">
<div class="flower"></div>
<div class="flower"></div>
</div>
```
CSS:
```css
.flower-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #e0f2f1;
}
.flower {
width: 80px;
height: 80px;
position: relative;
transform-origin: center bottom;
animation-name: rotate;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.flower::before {
content: "";
width: 0;
height: 0;
border-top: 40px solid #ff4081;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
animation: shake 1s infinite;
}
.flower::after {
content: "";
width: 0;
height: 0;
border-bottom: 40px solid #ff4081;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
animation: shake 1s infinite alternate;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes shake {
0% {
transform: rotate(0deg) translateY(-5px);
}
50% {
transform: rotate(20deg) translateY(0);
}
100% {
transform: rotate(0deg) translateY(-5px);
}
}
```
JS:无需 JavaScript。
这个代码使用 CSS3 动画实现,包括旋转和晃动两个动画效果。其中,两朵花的晃动方向相反,通过 animation-direction: alternate; 实现。您可以将两朵花放在一个容器中,通过设置容器的宽度、高度和背景色来创建一个类似草地的背景。