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

Css3-实现小圆环绕大圆360旋转

2016-12-27 15:44 417 查看

效果如图：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
body{margin:0px;padding:0px;}
.big,.small,.big1{width: 150px;height: 150px;color: #e25f5b;font-weight: bold;border-radius:50%;border: 1px solid #007aff;position:absolute;bottom: 80px;right:5px;z-index:1;text-align: center;background: -webkit-linear-gradient(158.5deg, #fff 0%, #007aff 100%);background: linear-gradient(158.5deg, #fff 0%, #007aff 100%);}
.big{box-shadow:5px 6px 10px #848181;-webkit-animation:circle 5s infinite linear;/*匀速循环*/}
.big1{width:148px;height:148px;line-height:148px;bottom: 81px;right: 6px;background:none;z-index:2;}
.small{width: 10px;height: 10px;background: #eaac1a;bottom: 155px;right: 88px;border: 1px dashed #e0d222;}
@-webkit-keyframes circle{
0%{ transform:rotate(0deg); }
100%{ transform:rotate(360deg); }
}
</style>
</head>
<body>
<h4>两个大圆，big和big1，big是会转，并且有阴影，big1不会转，没阴影，用来挡住big。
小圆，看html结构，与大圆big是父级关系，故其转动时伴随大圆big的。</h4>
<div style="position:relative;width:400px;height:400px;">

<div class="big">
<div class="small"></div>
</div>
<div class="big1">大圆</div>

</div>

</body>
</html>

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

标签： css3

相关文章推荐

新的分享

章节导航