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

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

                                          

body部分:

        <body>
            <i class="boxs"></i>    
        </body>

css部分:

        给body添加一个灰色背景:

            body{
                background-color: #ccc;
            }

       为<i>标签设置弹性布局 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伪对象选择符创建内部的两个小圆形,由于<i>标签是弹性布局,并且设置了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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值