利用CSS构造太极动画图网页

最新推荐文章于 2022-08-12 08:38:22 发布

何方圆

最新推荐文章于 2022-08-12 08:38:22 发布

阅读量330

点赞数

分类专栏：前端文章标签： css css3 html5 javascript chrome

本文链接：https://blog.csdn.net/weixin_45723705/article/details/115184707

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

利用CSS构造太极动画图网页

废话少说，直接上代码，然后再详细介绍构造过程。

代码

<!DOCTYPE html>
<html>
<head>
<title>太极动画</title>
<meta charset="utf-8">
<style>

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #ccc;
}

.taiji {
    width: 150px;
    height: 300px;
    margin: 100px auto;
    border-right: 150px solid #000;
    background-color: #fff;
    border-radius: 150px;
    animation: rotate 2s infinite linear;
}

.taiji::before,
.taiji::after {
    content: '';
    margin-left: 50%;
    display: block;
    width: 50px;
    height: 50px;
    background-color: #fff;
    border: 50px solid #000;
    border-radius: 75px;
}

.taiji::after {
    background-color: #000;
    border: 50px solid #fff;
}

@keyframes rotate {
    from {}

    to {
        transform: rotate(-360deg);
    }
}

</style>
</head>
<body>

<div class="taiji"></div>

</body>
</html>

在这里插入图片描述

构造过程

step1:声明，设置背景

代码

<!DOCTYPE html>
<html>
<head>
<title>太极动画</title>
<meta charset="utf-8">
<style>

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #ccc;
}

</style>
</head>
<body>

<div class="taiji"></div>

</body>
</html>

声明设置完成，然后可以直接向里面添加东西了。我们不追求色彩的鲜艳，设置背景色为灰色。

step2:构造大圆

CSS代码

.taiji {
    width: 150px;
    height: 300px;
    margin: 100px auto;
    border-right: 150px solid #000;
    background-color: #fff;
    border-radius: 150px;
}

在这里插入图片描述

我们打算构造半径为150px的大圆。我们首先构造宽度与高度分别为150px和300px的矩形区域，然后在他的右边构造一个相同尺寸的实心，背景色为黑色的边框。见下图：
在这里插入图片描述
然后再利用border-radius将其形状改为圆形。

step3:构造小圆

CSS代码

.taiji::before,
.taiji::after {
    content: '';
    margin-left: 50%;
    display: block;
    width: 50px;
    height: 50px;
    background-color: #fff;
    border: 50px solid #000;
    border-radius: 75px;
}

.taiji::after {
    background-color: #000;
    border: 50px solid #fff;
}

在这里插入图片描述
首先我们确定内圆的直径，内圆的直径应该为大圆的六分之一，即50px,我们首先构造尺寸为50px的正方形块，再利用border-radius将其形状改为圆形，并居中。然后再构造外圆，外圆直径应为大圆的一半，即150px,我们利用border设置边框，则边框尺寸为：（150-50）/2=50px。
我们利用伪元素进行构造。

.taiji::before,
.taiji::after {
    content: '';
    margin-left: 50%;
    display: block;
    width: 50px;
    height: 50px;
    background-color: #fff;
    border: 50px solid red;
    border-radius: 75px;
}

在这里插入图片描述
为了区分，将边框圆的颜色设置为红色。实际为黑色。则我们只需要将下圆的边框圆背景色设置为白色，内圆设置为黑色，太极就构造完成了。

.taiji::after {
    background-color: #000;/*设置内圆颜色为黑色*/
    border: 50px solid #fff;/*设置边框圆颜色为白色*/
}

至此，太极图构造完成。下面我们进行动画的设置。

step4:动画设置

CSS代码

@keyframes rotate {
    from {}

    to {
        transform: rotate(-360deg);
    }
}

我们将动画名称设置为rotate，动画效果设置为逆时针360度旋转。
rotate参数设置：

animation: rotate 2s infinite linear;

设置一直旋转。
至此所有的步骤都已完成。
在这里插入图片描述

何方圆

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
利用CSS构造太极动画图网页

利用CSS构造太极动画图网页废话少说，直接上代码，然后再详细介绍构造过程。代码<!DOCTYPE html><html><head><title>太极动画</title><meta charset="utf-8"><style>* { margin: 0; padding: 0;}body { background-color: #ccc;}.taiji { w
复制链接

扫一扫