嗨喽大家好,你们可爱的小编又来啦,今天小编给大家写了一个好玩的css教程:

详细代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<style>
.box{
width:1020px;
height:450px;
border:1px solid #ccc;
margin:50px auto;
position:relative;
}
.box li{
display: block;
position:absolute;
}
.box .l1{
width: 120px;
height: 120px;
border-radius: 50%;
background: #DE5044;
left: 130px;
top: 68px;
}
.box .l2{
width: 120px;
height: 120px;
background: #DE5044;
top: 130px;
left: 130px;
}
.box .l3{
width: 120px;
height: 120px;
border-radius: 50%;
background: #DE5044;
top: 130px;
left: 63px;
}
.taichi {
position: relative;
left:450px;
top:130px;
width: 48px; /* 50 - 2 */
height: 96px; /* 100 - 2 - 2 */
background: #fff;
border: 2px solid #000;
border-width: 2px 50px 2px 2px;
border-radius: 50%;
-webkit-animation:mymove 3s infinite;
}
@-webkit-keyframes mymove{
form{
-webkit-transform:rotate(0deg); /* Safari 和 Chrome */
}
to{
-webkit-transform:rotate(360deg);
}
}
.white-circle {
position: absolute;
top: 0;
left: 50%;
background: #fff;
border-radius: 50%;
width: 48px;
height: 48px;
}
.black-circle {
position: absolute;
top: 50%;
left: 50%;
background: #000;
border-radius: 50%;
width: 48px;
height: 48px;
}
.white-circle::after {
content: "";
position: absolute;
top: 17px; /* (50-16)/2 */
left: 17px; /* (50-16)/2 */
background: #000;
border-radius: 50%;
width: 16px;
height: 16px;
}
.black-circle::after {
content: "";
position: absolute;
top: 17px; /* (50-16)/2 */
left: 17px; /* (50-16)/2 */
background: #fff;
border-radius: 50%;
width: 16px;
height: 16px;
}
</style>
<body>
<h1 style="color:#444;text-align: center;">简单的css画图</h1>
<div class="box">
<li class="l1"></li>
<li class="l2"></li>
<li class="l3"></li>
<div class="taichi">
<div class="white-circle"></div>
<div class="black-circle"></div>
</div>
</div>
</body>
</html>
感谢大家阅读!更多精彩内容及教程请持续关注我们!