HTML与CSS实现风车旋转图形的代码技术详解

在前端开发中，HTML和CSS是构建网页的基础技术。通过巧妙运用HTML的结构搭建和CSS的样式控制，我们能够实现各种精美的视觉效果。本文将对一段实现旋转图形效果的HTML和CSS代码进行详细解读，剖析其中的技术要点。

一、运行效果

HTML与CSS实现风车旋转图形

二、整体代码结构分析

上述代码由HTML和CSS两部分组成。HTML部分构建页面的基本结构，CSS部分则负责定义样式和动画效果。

1. HTML结构

<body><div class="main"><div class="white_circle"></div><div class="fla fla_one"><div class="squ squ_one"></div><div class="tri tri_one"></div></div><div class="fla fla_two"><div class="squ squ_two"></div><div class="tri tri_two"></div></div><div class="fla fla_three"><div class="squ squ_three"></div><div class="tri tri_three"></div></div><div class="fla fla_four"><div class="squ squ_four"></div><div class="tri tri_four"></div></div></div>
</body>

在HTML的<body>标签内，最外层是一个类名为main的<div>元素，它作为整个图形的容器。内部包含了一个白色圆形（white_circle类）和四个不同的图形组合（fla类及其子元素）。每个图形组合又由一个矩形（squ类）和一个三角形（tri类）组成，通过不同的类名区分各自的样式和旋转角度。

2. CSS样式

CSS部分被包含在HTML的<head>标签内的<style>标签中，用于设置各个元素的样式和动画效果。

* {margin: 0;padding: 0;
}

*通配符选择器将所有元素的margin和padding设置为0，这是为了消除浏览器默认的内外边距，保证页面布局的一致性。

三、关键样式解析

1. 容器样式

.main {width: 804px;height: 804px;animation: roll 3000ms linear infinite;
}

类名为main的元素定义了容器的宽高均为804px，并应用了名为roll的动画。动画持续时间为3000ms（即3秒），以linear线性的速度播放，并且infinite无限循环。

2. 动画定义

@keyframes roll {0% {transform: rotate(0deg);}100% {transform: rotate(-360deg);}
}

@keyframes规则定义了名为roll的动画。在动画的起始阶段（0%），元素的旋转角度为0度；在结束阶段（100%），元素旋转-360度，负号表示逆时针旋转，从而实现图形的持续旋转效果。

3. 白色圆形样式

.white_circle {z-index: 99;position: absolute;width: 50px;height: 50px;border-radius: 50px;background-color: white;margin: 377px 0 0 377px;
}

white_circle类定义了一个白色圆形。z-index: 99将其置于较高的层叠顺序，使其显示在其他图形之上。position: absolute使其脱离文档流进行绝对定位，通过margin属性精确设置其在容器中的位置。border-radius: 50px将方形元素转换为圆形，background-color: white设置其背景颜色为白色。

4. 图形组合样式

.fla {position: absolute;width: 402px;height: 180px;
}

fla类定义了图形组合的基本样式，设置为绝对定位，并指定了宽高。

.fla_one {transform: rotate(270deg);margin:108px 0px 0px 121px;
}
.fla_two {transform: rotate(180deg);margin-top: 389px;
}
.fla_three {transform: rotate(90deg);margin: 511px 0 0 280px;
}
.fla_four {transform: rotate(360deg);margin: 230px 0 0 402px;
}

这些类通过transform: rotate()属性分别设置了不同的旋转角度，并且通过margin属性调整其在容器中的位置，使得四个图形组合围绕中心均匀分布。

5. 三角形样式

.tri {width: 0;height: 0;border-width: 142px;border-style: solid;border-top-left-radius: 109px 122px;position: absolute;transform: rotate(45deg);top: 28px;left: 56px;
}

tri类通过设置border属性创建了一个三角形。width和height设置为0，通过不同方向的边框颜色和宽度来形成三角形形状。border-top-left-radius属性为三角形的左上角添加圆角效果。position: absolute配合top和left属性确定其在父元素中的位置，transform: rotate(45deg)对三角形进行旋转。

.tri_one {border-color: #F1C40F transparent transparent #F1C40F;
}
.tri_two {border-color: #EA4C3C transparent transparent #EA4C3C;
}
.tri_three {border-color: #2ECC71 transparent transparent #2ECC71;
}
.tri_four {border-color: #1ABC9C transparent transparent #1ABC9C;
}

这些类分别设置了不同三角形的边框颜色，通过调整颜色值实现图形的区分。

6. 矩形样式

.squ {position: absolute;width: 271px;height: 170px;border-top-right-radius: 98px 68px;
}

squ类定义了矩形的基本样式，通过border-top-right-radius属性为矩形的右上角添加圆角效果。

.squ_one {background-color: #F39C12;
}
.squ_two {background-color: #C0392B;
}
.squ_three {background-color: #27AE60;
}
.squ_four {background-color: #16A085;
}

这些类分别设置了不同矩形的背景颜色，进一步丰富图形的视觉效果。

四、完整代码


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin: 0;padding: 0;}.main{width: 804px;height: 804px;animation: roll 3000ms linear infinite;}@keyframes roll{0%{transform: rotate(0deg);}100%{transform: rotate(-360deg);}}.white_circle{z-index: 99;position: absolute;width: 50px;height: 50px;border-radius: 50px;background-color: white;margin: 377px 0 0 377px;}.fla{position: absolute;width: 402px;height: 180px;}.fla_one{transform: rotate(270deg);margin:108px 0px 0px 121px;}.fla_two{transform: rotate(180deg);margin-top: 389px;}.fla_three{transform: rotate(90deg);margin: 511px 0 0 280px;}.fla_four{transform: rotate(360deg);margin: 230px 0 0 402px;}.tri{width: 0;height: 0;border-width: 142px;border-style: solid;border-top-left-radius: 109px 122px;position: absolute;transform: rotate(45deg);top: 28px;left: 56px;}.tri_one {border-color: #F1C40F transparent transparent #F1C40F;}.tri_two {border-color: #EA4C3C transparent transparent #EA4C3C;}.tri_three {border-color: #2ECC71 transparent transparent #2ECC71;}.tri_four {border-color: #1ABC9C transparent transparent #1ABC9C;}.squ{position: absolute;width: 271px;height: 170px;border-top-right-radius: 98px 68px;}.squ_one{background-color: #F39C12;}.squ_two{background-color: #C0392B;}.squ_three{background-color: #27AE60;}.squ_four{background-color: #16A085;}</style>
</head>
<body><div class="main"><div class="white_circle"></div><div class="fla fla_one"><div class="squ squ_one"></div><div class="tri tri_one"></div></div><div class="fla fla_two"><div class="squ squ_two"></div><div class="tri tri_two"></div></div><div class="fla fla_three"><div class="squ squ_three"></div><div class="tri tri_three"></div></div><div class="fla fla_four"><div class="squ squ_four"></div><div class="tri tri_four"></div></div></div>
</body>
</html>