夏天到了，看CSS代码画出一个清凉的风车，好心情伴你整个夏日

前端

2023-10-12 20:40:49

CSS代码画风车

夏天到了，天气炎热，让人感到烦躁不安。为了让大家在炎热的夏日里保持凉爽的心情，我们今天来学习如何使用CSS代码画一个清凉的风车。

准备工作

在开始之前，您需要准备以下工具：

文本编辑器（如记事本、Sublime Text、Atom等）
浏览器（如Chrome、Firefox、Safari等）

代码编写

打开文本编辑器，复制以下代码并粘贴到其中：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div class="windmill">
    <div class="blade"></div>
    <div class="blade"></div>
    <div class="blade"></div>
  </div>
</body>
</html>

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

.blade {
  width: 50px;
  height: 100px;
  background-color: #0099FF;
  position: absolute;
  top: 0;
  left: 50%;
  transform-origin: center bottom;
  animation: spin 10s infinite linear;
}

.blade:nth-child(2) {
  transform: rotate(120deg);
}

.blade:nth-child(3) {
  transform: rotate(240deg);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}