纯CSS3实现旋转太极图效果

最新推荐文章于 2022-10-12 16:40:05 发布

虞粥粥

最新推荐文章于 2022-10-12 16:40:05 发布

阅读量284

点赞数

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

本文链接：https://blog.csdn.net/weixin_43540912/article/details/102957302

版权

css 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

学习作业：

用刚学的animation动画和结合之前的伪类，实现一个纯CSS3的太极图的动态效果

<style>
 div{border:1px solid red;
  border-bottom: 51px solid red;
  width: 100px; //102px
  height: 50px;
  //height = border+height(102px) 实现一个正方形，利用一半的边框实现半圆
   border-radius: 50%;
  position: relative;
 //即使是叠加伪类也需要加上定位
  animation:taiji 2s ease-in-out 1s infinite alternate ;
  //实际需要加上兼容
  }
 @keyframes taiji{
  from{transform:rotate(0deg);}
  to{transform:rotate(365deg);}
 }
 div::before{
  content:'';
  width:14px;
  height:14px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  //子绝父相
  top: 50%;
  border: 18px solid red;
 }
 div::after{
  content:'';
  width:14px;
  height:14px;
  background: red;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  border: 18px solid #fff;
 }
 </style>
</head>
<body>
 <div></div>
</body>

效果图：
在这里插入图片描述

虞粥粥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯CSS3实现旋转太极图效果

学习作业：用刚学的animation动画和结合之前的伪类，实现一个纯CSS3的太极图的动态效果<style> div{border:1px solid red; border-bottom: 51px solid red; width: 100px; //102px height: 50px; //height = border+height(102px) 实现一...
复制链接

扫一扫