利用css实现太极图的制作（带旋转动画） （课程实践教学项目）
简要说明第一步：太极图的绘制（1）相关知识：实现步骤：代码：效果： 第二步：太极图的绘制（2）相关知识：实现步骤：代码：效果： 第三步：使太极图旋转：相关知识：实现步骤：代码：简要说明
此项目是作为前端教学实践时，一些个人理解，后被老师选作为edu实训平台实训。以三步实现最终效果。
第一步：太极图的绘制（1）
相关知识：
CSS属性：
width：heigth：设置段落的高度和宽度。border：简写属性在一个声明设置所有的边框属性。可以按顺序设置如下属性：
• border-width
• border-style
• border-color
eg：border：2px solid #000; 表示为宽度为2像素的黑色实线条。border-bottom: 设置下边框的样式，具体用法与border相同。position: 规定元素的定位类型。
eg：position:absolute; left:0;top:0;right:0;bottom:0;元素所有边距与其包含块边界之间的偏移为0像素。
5. margin: 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
6.border-radius: 为元素添加圆角边框。
实现步骤：
1：定义一个div盒子
2：将div盒子的宽度设置为96像素，高度设置为48像素。
2：将div盒子的边框设置为宽度为2像素的黑色#000实线。
4：将盒子的下边框宽度设置为50像素的黑色#000实线。
5：对盒子绝对定位为absolute属性，其附属属性设置为0像素。
6：对盒子的外边距属性设置为自动。
7：为盒子边框设置圆角边框，属性值为50%。
代码：
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>div{width: 96px;height: 48px;border: 2px solid #000;border-bottom:50px solid #000;position:absolute; left:0px;top:0px;right:0px;bottom:0px;margin:auto;border-radius:50%;}</style></head><body><div></div></body></html>
效果：
第二步：太极图的绘制（2）
相关知识：
content 属性与 :before 及 :after 伪元素配合使用，来插入内容。:before 选择器在被选元素的内容前面插入内容。:after 选择器在被选元素的内容后面插入内容。（这两个伪类选择器很有意思 ，可以深入了解一下。）
实现步骤：
创建一个before和after伪类选择器。全部添加content属性属性值为空。在before伪类选择器中：
1： 对该元素绝对定位为absolute属性，其附属属性left设置为0像素，top属性设置为50%。
2： 设置该元素宽为8像素，高为8像素。
3：设置该元素背景色为黑色#000。
4：对该元素设置一条宽为20像素的白色#fff实线。
5为该元素边框设置圆角边框，属性值为50%。
在after伪类选择器中：
1： 对该元素绝对定位为absolute属性，其附属属性right设置为0像素，top属性设置为50%。
2： 设置该元素宽为8像素，高为8像素。
3：设置该元素背景色为白色#fff。
4：对该元素设置一条宽为20像素的黑色#000实线。
5为该元素边框设置圆角边框，属性值为50%。
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>div{width:96px;height:48px;border:2px solid #000;border-bottom:50px solid #000;position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;border-radius:50%;}div:before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;background:#000;border:20px solid #fff;border-radius:50%;}div:after{content:""; position:absolute;right:0;top:50%;width:8px;height:8px;background:#fff;border:20px solid #000;border-radius:50%;}</style></head><body><div></div></body></html>
效果：
第三步：使太极图旋转：
相关知识：
transition:过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 ：hover，：active 或者通过 JavaScript 实现的状态变化。
Transform： 向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
eg：transform:rotate(-360deg);实现逆时针旋转360度。
:hover ：伪类选择器，选择鼠标指针浮动在其上的元素，并设置其样式。
eg：div:hover{background:#fff;} 当鼠标悬停在div上时背景颜色变为白色。
实现步骤：
1:对div元素添加transition:属性，属性值为all 2s linear;（意为 将全部元素以均匀速度在2S内完成旋转）
1： 对div元素添加新的伪类选择器:hover。
2： 在该伪类选择器中填加旋转属性，取值为-360deg。
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>div{width:96px;height:48px;border:2px solid #000;border-bottom:50px solid #000;position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;border-radius:50%;transition:all 2s linear;/*将全部元素以均匀速度在2S内完成旋转*/}div:before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;background:#000;border:20px solid #fff;border-radius:50%;}div:after{content:"";position:absolute;right:0;top:50%;width:8px;height:8px;background:#fff;border:20px solid #000;border-radius:50%;} div:hover{transform:rotate(-360deg);</style></head><body><div></div></body></html>
