一个标签实现动态太极图

最新推荐文章于 2022-10-12 20:56:01 发布

喜欢文学的程序员

最新推荐文章于 2022-10-12 20:56:01 发布

阅读量2.9k

点赞数 2

文章标签： css3

本文链接：https://blog.csdn.net/lishuai_it_trip/article/details/87436101

版权

最近看到一个小demo，一个标签实现动态太极图，按照如下两张图片的样式，来回交替运动，感觉很是惊喜，我们工作内容都是政府类网站，平时很少能把这些css3属性结合起来使用。

body部分：

css部分：

给body添加一个灰色背景：

body{
background-color: #ccc;
}

为标签设置弹性布局 display:flex, 再用css3线性渐变设置上半部分黑色，下半部分白色的背景色。
 .boxs{
 display: flex;
 align-items: center;
 width: 200px;
 height: 200px;
 margin: 100px auto;
 background: linear-gradient(#000 50%, #fff 50%);
 border-radius: 50%;
 }

效果如图：

接下来用css3伪对象选择符创建内部的两个小圆形，由于标签是弹性布局，并且设置了align-items:center属性，所以创建的内部元素垂直居中：

.boxs::before,
           .boxs::after{
               content: "";
               display: block;
               width: 50%;
               height: 50%;
               border-radius: 50%;
               background: #ff0;
           }

再来为内部的两个小圆改变一下颜色，用到的是css3径向渐变属性：

  .boxs::before{
               background: radial-gradient(#fff 25%, #000 25%);
           }
           .boxs::after{
               background: radial-gradient(#000 25%, #fff 25%);
           }

这样一个太极图就生成了，如何让他动起来呢？答案是：使用关键帧(@keyframes)和动画属性animation：

创建动画，从原始大小0.7倍变化到1.3倍：

  @keyframes move1{
               from{
                   transform: scale(0.7);
               }
               to{
                   transform: scale(1.3);
               }
           }

使用animation属性：由于.boxs::after需要先从大变到小，所以需要提前1秒执行。为了不让动画效果超出大圆的范围，所以两个小圆的基准点不同，一个在左（ transform-origin: 0% 50%），一个在右（transform-origin: 100% 50%; ）。

.boxs::before{
           background:-webkit-radial-gradient(#000 25%, #fff 25%);
           transform-origin: 0% 50%;
           animation-name: piece;
           animation-duration: 1s;
           animation-timing-function: linear;
           animation-iteration-count:infinite;
           animation-direction: alternate;
       }
       .boxs::after{
           background:-webkit-radial-gradient(#fff 25%, #000 25%);
           transform-origin: 100% 50%;           /*设置元素基点位置*/
           animation-name: piece; /*动画名称*/
           animation-duration: 1s; /*动画执行时间*/
           animation-timing-function: linear; /*动画速度曲线*/
           animation-delay: -1s; /*动画提前1秒执行*/
           animation-iteration-count:infinite; /*动画播放次数*/
           animation-direction: alternate; /*动画反向播放*/
       }
这样就完成了！（为了博客精简，所以没有加上"-webkit-","-moz-","-ms-"等兼容写法，但在实际开发中，这些不可缺少）。

喜欢文学的程序员

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
一个标签实现动态太极图

最近看到一个小demo，一个&lt;i&gt;标签实现动态太极图，按照如下两张图片的样式，来回交替运动，感觉很是惊喜，我们工作内容都是政府类网站，平时很少能把这些css3属性结合起来使用。 body部分： &lt;body&gt; &lt;i class="boxs"...
复制链接

扫一扫

一个<i>标签实现动态太极图