CSS：跳跃的小红花

2024-02-22 02:36:02

前言

今天我们一起来制作一个纯CSS实现的摇摆的小红花，布局上使用HTML+CSS布局，加上CSS3动画效果，本文还将介绍一个新的知识点transform-origin。该属性用来设置动画旋转元素的基点位置。

实现步骤

1. HTML结构

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div class="flower">
    <div class="stem"></div>
    <div class="petal"></div>
  </div>
</body>
</html>

2. CSS样式

.flower {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.stem {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 20px;
  height: 100px;
  background-color: green;
}

.petal {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
}

.petal:before,
.petal:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
}

.petal:before {
  left: -25px;
  top: -25px;
}

.petal:after {
  right: -25px;
  top: -25px;
}

/* 动画 */
.flower {
  animation: swing 3s infinite alternate;
}

@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}