css3动画transform-太极图

爱被打了一巴掌 2022-12-15 03:39 132阅读 0赞

学习动画，记录一下。  
HTML部分：类似图标，所以用了i标签。

css部分：

.taichi { 
            display: block;
            width: 400px;
            height: 400px;
            background: linear-gradient(to right, black 50%, white 50%);/*从左边往右边 先黑色到50%换成白色*/
            margin: 0 auto;
            margin-top: 100px;
            border-radius: 50%;
            animation: change3 5s infinite linear;
             /* 动画属性： 动画名称 播出时长 不停的播 匀速的旋转 */
        }
        .taichi::before,.taichi::after{ 
            display: block;
            content: '';
            width: 200px;
            height: 200px;
            border-radius: 50%;
            margin: 0 auto;
        }
        .taichi::before{ 
            background: radial-gradient(white 25%, black 25%); /*从里往外 先白色到25%换成黑色*/
            /* animation: change 1s infinite alternate linear; */
            /* 动画属性： 动画名称 播出时长 不停的播 倒放 匀速的旋转*/
            animation: change 1s infinite alternate ease-in-out;
            /* 动画属性： 动画名称 播出时长 不停的播 倒放 缓慢的变化*/
            animation-delay: -1s; /* 提前一秒 从大变小*/
            transform-origin: 50% 0;
            /* 设置元素的基点位置 */
        }
        .taichi::after{ 
            background: radial-gradient(black 25%, white 25%);
            animation: change 1s infinite alternate ease-in-out;
            /* 动画属性： 动画名称 播出时长 不停的播 倒放 缓慢的变化*/
            transform-origin: 50% 100%;
        }
        @keyframes change{ 
            from { 
                transform: scale(0.5);
            }
            to { 
                transform: scale(1.5);
            }
            /* 0-1s 从小变大 1-2s 从大变小*/
        }
        @keyframes change3{ 
            from { 
                transform: rotate(0deg);/* 旋转属性，角度 */
            }
            to { 
                transform: rotate(360deg);
            }
        }