<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>太极图作业</title>
<style type="text/css">
.background {
width: 400px;
height: 400px;
margin: 0 auto;
background-color: gold;
padding-top: 99px;
box-sizing: border-box;
}
.circle-box {
width: 200px;
height: 200px;
border-radius: 50%;
/*border: 1px solid #ff0000;*/
position: relative;
background: #fff;
margin: 0 auto;
overflow: hidden;
}
.bg-mask {
width: 100%;
height: 100px;
background-color: #000;
}
.circle-black-m,.circle-white-m{
width: 100px;
height: 100px;
border-radius: 50%;
}
.circle-black-m {
background-color: #000;
position: absolute;
top: 51px;
}
.circle-white-m {
background-color: #fff;
/*border: 1px solid #ff0000;*/
position: absolute;
top: 50px;
right: 0;
}
.circle-white,.circle-black {
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
}
.circle-white {
background-color: #fff;
top: 45px;
left: 35px;
}
.circle-black {
background-color: #000;
top: 25px;
left: 35px;
}
/*鼠标经过变色*/
/*.circle-box:hover {
background: #000;
}
.circle-box:hover .bg-mask{
background-color: #fff;
}*/
/* 动画代码 */
@keyframes turnZ {
0% {transform: rotateZ(360deg);}
100% {transform: rotateZ(0deg);}
}
/* 应用动画的元素 */
.circle-box:hover {
animation-name: turnZ;
animation-duration: 4s;
animation-iteration-count: 1;
}
</style>
</head>
<body>
<div class="background">
<div class="circle-box">
<div class="bg-mask"></div>
<div class="circle-black-m">
<div class="circle-white"></div>
</div>
<div class="circle-white-m">
<div class="circle-black"></div>
</div>
</div>
</div>
</body>
</html>博客列表 >0509作业——制作太极图
0509作业——制作太极图
- 一把青的博客原创转载
- 2022年05月10日 10:49:24514浏览
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
