案例:太极八卦图: 巧用伪元素实现一个盒子制作旋转太极图
程序员文章站
2022-03-11 09:37:28
...
欢迎大家参考,觉得好玩儿可以点个赞哦.
可以拿走~
HTML结构如下
<body>
<div></div>
</body>
CSS样式如下
<style>
body {
background-color: #cccccc;
}
div {
position: relative;
width: 200px;
height: 400px;
background-color: #fff;
border-left: 200px solid #000;
margin: 100px auto;
border-radius: 50%;
animation: xuanzhuan 4s linear infinite;
animation: name duration timing-function delay iteration-count direction fill-mode;
}
@keyframes xuanzhuan {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
div::before {
position: absolute;
top: 0;
left: 50%;
transform: translate(-100%);
content: '制作';
line-height: 50px;
text-align: center;
color: #000;
display: inline-block;
width: 50px;
height: 50px;
background-color: #fff;
border: 75px solid #000;
border-radius: 50%;
}
div::after {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-100%);
content: '老范';
line-height: 50px;
text-align: center;
color: #fff;
display: inline-block;
width: 50px;
height: 50px;
background-color: #000;
border: 75px solid #fff;
border-radius: 50%;
}
</style>
通过before和after伪元素
给盒子加了两个小盒子.
设置边框宽度等于盒子内容宽度,颜色相反.
设置圆角属性.
最后设置动画旋转.
最终效果
上一篇: 边框-绘制八卦图
下一篇: Ruby 1.9概要(1)新的语法和语义