您的位置：首页 > Web前端 > CSS

css的伪类：before 和：after 的强大之处

2016-11-17 01:55 423 查看

太极图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>八卦图</title>
<style>
/*=====
技术要点:实现此技术需要用到css伪类:before和:after--->>注意点:就是要在指定的元素内容之前或者之后插入一个包含content属性(需要注意的是如果没有content属性伪类将没有任何作用);
====*/
*{margin: 0;padding: 0;}
body{background: blue;}
.Gossip{
width:192px;
height:96px;
background: #fff;
border-style: solid;
border-width: 0px 0px 100px 0px;
position: relative;
border-radius:50%;
margin: 100px auto;
-webkit-animation:move 2s linear infinite;
}
.Gossip:before,
.Gossip:after{
content: "";
position: absolute;
}
.Gossip:before{
width: 24px;
height: 24px;
top:50%;
left:0px;
background: #fff;
border: 36px solid #000;
border-radius:50%;
}
.Gossip:after{
width: 24px;
height: 24px;
top:50%;
left:50%;
background:#000;
border: 36px solid #fff;
border-radius:50%;
}
@keyframes move{
0%{
-webkit-transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div class="Gossip"></div>
</body>
</html>

![八卦](http://img.blog.csdn.net/20161117015500561)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航

css的伪类：before 和 ：after 的强大之处

css的伪类：before 和：after 的强大之处