今天我们用CSS画一个太极

最新推荐文章于 2024-10-09 19:16:55 发布

陨辰不殒

最新推荐文章于 2024-10-09 19:16:55 发布

阅读量263

点赞数 13

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_79562726/article/details/137370400

版权

首先

我们使用width和height做出一个框作为我们太极的雏形，使用border分离这个框，分别设置颜色形成，一半白一半黑色，现在我们对它进行修饰，使用margin将其往中间放一点，最重要的是border-radius，这个让我们的方形变得圆润，从而变成我们看到的这样。

其次

我们下面该搞之间的圆了，还是和刚刚一样，设置边框，这次我们使用before和after这两个伪元素，方便连接我们第一个图形，还是margin，不过这次是加left，否则会让咱们设置的这个边框放到原来边框的中间，再用刚刚使用的border分隔这次不要加方向，因为我们取中间部分而不是分隔，然后现在我们已经成功创建两个方形的边框，现在我们还是用border-radius将它变得圆润。

现在

我们已经做出了这个太极，那么如果它不会旋转是不是很不好玩，现在我们给它升级，我们使用animation动画函数，它需要我们加上一个@keyframes,随便设置一个名字，我们的animation 这样写：animation：rotate(这里我们用旋转的英文命名这个动画，实际上什么都可以命名它) 2s ;现在我们再加上infinite让它循环，再加上linear让它更加衔接，下面是我们的@keyframes，我们给它设定rotate（360deg）就可以实现360°旋转了。

下面是完整代码，我也刚刚学，讲得不好，有错误还希望大佬们指正和包容。

<！DOCTYPE html>
<html>  <head>    <meta charset="utf-8" />    <title></title>    <style>    body{      background-color: antiquewhite;    }    .taiji{    width:150px;    height:300px;    margin:100px auto;    border-right: 150px solid #000;    background-color: #fff;    border-radius: 150px;    animation: a 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: 150px;    }    .taiji::after {        background-color: #000;        border: 50px solid #fff;    }    @keyframes a{        from {}            to {            transform: rotate(-360deg);        }    }</style>  </head>  <body>    <div class="taiji"></div>  </body></html>