HTML代码：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<linkrel="stylesheet"href="../css/练习.css">
<title>心</title>
</head>
<body>
<divclass="name">
<divclass="name1"></div>
<divclass="name2"></div>
<divclass="name3"></div>
<divclass="content"></div>
</div>
</body>
</html>
css代码：
*{
margin:0;
padding:0;
font-size:0;
}
.name{
width:100%;
height:700px;
background-color:black;
}
.name1,.name2{
width:100px;
height:50px;
border-radius:100px100px00;
background-color:red;
display:inline-block;
position:relative;
left:45%;
}
.name1{
transform:rotate(-45deg);
margin-top:200px;
}
.name2{
transform:rotate(45deg);
margin-top:200px;
}
.name3{
width:100px;
height:100px;
background-color:red;
transform:rotate(-45deg);
position:relative;
top:-25px;
left:48.25%;
}
.content{
margin:0auto;
width:50px;
height:50px;
border:3pxsolidrgb(156,156,156);
border-top:3pxsolid#00f;
margin-top:100px;
border-radius:50%;
animation:flash2slinearinfinite;
}
@keyframesflash{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
喜欢的给个支持！！！
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h56399.shtml
