利用css实现太极图的制作（带旋转动画）（课程实践教学项目）

最新推荐文章于 2024-05-11 20:33:26 发布

老板别放辣椒！

最新推荐文章于 2024-05-11 20:33:26 发布

阅读量1.9k

点赞数

文章标签： python pycharm 开发语言

本文链接：https://blog.csdn.net/czhfll/article/details/123866611

版权

利用css实现太极图的制作（带旋转动画）（课程实践教学项目）

简要说明

简要说明

此项目是作为前端教学实践时，一些个人理解，后被老师选作为edu实训平台实训。以三步实现最终效果。

第一步：太极图的绘制（1）

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

auto	浏览器计算外边距，根据内容自动调整。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的外边距。
inherit	规定应该从父元素继承外边距。

length	定义圆角的形状。
%	以百分比定义圆角的形状。

实现步骤：

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）

实现步骤：

创建一个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>

效果：

在这里插入图片描述

第三步：使太极图旋转：

实现步骤：

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>