直播网课CSS3旋转太极图

最新推荐文章于 2022-12-30 14:05:34 发布

甜七

最新推荐文章于 2022-12-30 14:05:34 发布

阅读量392

点赞数

分类专栏： css html 文章标签： css html

本文链接：https://blog.csdn.net/W19851121/article/details/80616777

版权

html 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

旋转太极图

属性

borde-radius：圆角属性，在四个角画圆，有4个值，分别对应左上角，右上角，右下角，左下角，1234/6578带斜杠属性是椭圆角，斜杠前数据是横轴数据，后面的是竖轴数据
linear-gradient() ：设置渐变色，默认上下渐变，to right 左右渐变
margin-tob:*%：百分比是相对于父类的宽
display:flex；：弹性盒子模型定性设置，建立了主轴（横轴）与交叉轴（竖轴），子元素都要沿着父元素的主轴排，默认情况下，一个块元素占一行。
radial-gradient（）：镜像渐变
animation：播值算法
alternate：倒带播放
transform-origin 50%，50%：移动变化原点，默认参数50%
linear：匀速运动

代码

<title>旋转太极图</title>
<style>
body{
    margin:0;
    background-color:#ccc;
    font-size:24px;
}
.taichi{
    display:flex;/*弹性盒子代码 代码1*/
    align-items:center;/*代码2*/
    width:400px;
    height:400px;
    background:linear-gradient(black 50%,white 50%);
    margin:100px auto 0;
    border-radius:50%;
}
.taichi::before,.taichi::after{
    content:"";
    display:block;
    width:50%;
    height:50%;
    border-radius:50%;
    animation:changeSize 1s infinite alternate linear;
    /*动画属性：动画名称，播出时长，无限循环，倒带播放，匀速运动*/
}
.taichi::before{
    background: radial-gradient(black 25%,white 25%);
    transform-origin:0% 50%;
}
.taichi::after{
    background: radial-gradient(white 25%,black 25%);
    transform-origin:100% 50%;
    animation-delay:-1s;/*左比右动画提前一秒*/
}
@keyframes changeSize{
    from{/*第一帧*/
        transform:scale(0.5);/*变化：大小（倍数  0~1缩小>1变大）*/
    }
    to{/*最后一帧*/
        transform:scale(1.5);/*变化：大小（倍数  0~1缩小>1变大）*/
    }
    }
    .taichi{
        width:100px;
        height:100px;
    }
</style>
</head>

<body>
<i class="taichi"></i>
</body>
</html>

效果

甜七

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
直播网课CSS3旋转太极图

旋转太极图属性borde-radius：圆角属性，在四个角画圆，有4个值，分别对应左上角，右上角，右下角，左下角，1234/6578带斜杠属性是椭圆角，斜杠前数据是横轴数据，后面的是竖轴数据 linear-gradient() ：设置渐变色，默认上下渐变，to right 左右渐变 margin-tob:*%：百分比是相对于父类的宽 display:flex；：弹性盒子模...
复制链接

扫一扫