用css怎么做出五个圆平均围绕在一个圆四周

答案:3 悬赏:60

解决时间 2021-02-18 11:14

提问者网友：不懂我就别说我变
2021-02-17 17:08

最佳答案

二级知识专家网友：万千宠爱
2021-02-17 18:00

主要是使用box-shadow偏移
核心代码: box-shadow: -0.11em -0.83em 0 -0.4em #56c29e, -0.11em -0.83em 0 -0.42em #56c29e, -0.11em -0.83em 0 -0.44em #56c29e, -0.11em -0.83em 0 -0.46em #56c29e, -0.11em -0.83em 0 -0.477em #56c29e;
这个效果是动态的,请复制下面所有代码到html里，运行网页即可
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.load {
width: 1.3em;
height: 1.3em;
border-radius: 20px;
animation: xuanzhuan 2s infinite;
background: red;
margin: 48% auto;
zoom: 3.0;
}

@keyframes xuanzhuan {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: -0.11em -0.83em 0 -0.4em #56c29e, -0.11em -0.83em 0 -0.46em #56c29e, -0.11em -0.83em 0 -0.52em #56c29e, -0.11em -0.83em 0 -0.58em #56c29e, -0.11em -0.83em 0 -0.70em #56c29e;
}
5%,
95% {
box-shadow: -0.11em -0.83em 0 -0.4em #56c29e, -0.11em -0.83em 0 -0.46em #56c29e, -0.11em -0.83em 0 -0.52em #56c29e, -0.11em -0.83em 0 -0.58em #56c29e, -0.11em -0.83em 0 -0.70em #56c29e;
}
30% {
box-shadow: -0.11em -0.83em 0 -0.4em #56c29e, -0.51em -0.66em 0 -0.46em #56c29e, -0.75em -0.36em 0 -0.52em #56c29e, -0.83em -0.03em 0 -0.58em #56c29e, -0.81em 0.21em 0 -0.70em #56c29e;
}
55% {
box-shadow: -0.11em -0.83em 0 -0.4em #56c29e, -0.29em -0.78em 0 -0.46em #56c29e, -0.43em -0.72em 0 -0.52em #56c29e, -0.52em -0.65em 0 -0.58em #56c29e, -0.57em -0.61em 0 -0.70em #56c29e;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: -0.11em -0.83em 0 -0.4em #56c29e, -0.11em -0.83em 0 -0.46em #56c29e, -0.11em -0.83em 0 -0.52em #56c29e, -0.11em -0.83em 0 -0.58em #56c29e, -0.11em -0.83em 0 -0.70em #56c29e;
}
}
</style>
</head>
<body>
<div class="load">

</div>
</body>
</html>

全部回答

1楼网友：晚安听书人
2021-02-17 19:08

一个div里面6个div做圆，一个垂直水平居住，其他5个用定位

2楼网友：承载所有颓废
2021-02-17 18:05

我要举报

如以上问答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！