老师，@keyframes后面不是可以跟多个值吗？为什么放上去不但不管用，还不转了呢
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3动画</title>
<style type="text/css">
.big {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
width: 400px;
height: 400px;
margin: auto;
border: 1px solid red;
border-bottom: 200px solid red;
border-radius: 50%;
transform-origin: 50% 50%;
animation-name: rotate;
animation-duration: 5s;
animation-timing-function: linear;
/*此处写代码*/
animation-iteration-count:infinite;
}
.big::before{
display: block;
content: "";
position: relative;
left: 0;
top: 100px;
width:200px;
height: 200px;
border-radius: 50%;
background:red;
}
.big::after{
display: block;
content: "";
position: relative;
left: 198px;
right: 0;
top: -102px;
width:200px;
height: 200px;
border-radius: 50%;
background:white;
}
.small{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
z-index: 999;
width: 40px;
height: 40px;
margin: auto;
border-radius: 50%;
}
.small1{
background-color: white;
left: -190px;
animation-name: ta;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.small2{
background-color: red;
left: 190px;
animation-name: te;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes rotate,ta,te{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="big"></div>
<div class="small small1"></div>
<div class="small small2"></div>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好， 是因为两个小圆没有被大的div包裹，小圆设置决定定位参照的是窗口， 导致小圆没有随着外面的圆转动。建议修改： 让两个小圆参照大圆定位。 让小圆可以随着大院的转动而转动。 HTMl结构如下：
将小圆放在大圆下， 需要调整小圆的样式， 可以参考下面的代码理解
.small {
position: absolute;
/*top: 0;*/
top: 100%;
/*left: 50%;*/
/*right: 0;*/
/*bottom: 0;*/
/*left: 0;*/
box-sizing: border-box;
z-index: 999;
width: 40px;
height: 40px;
/*margin: auto;*/
border-radius: 50%;
animation-name: te;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.small1 {
background-color: white;
/*left: -190px;*/
left: 25%;
transform: translate(-20px, -20px);
}
.small2 {
background-color: red;
/*left: 190px;*/
right: 25%;
transform: translate(20px, -20px);
}同学可以自己下去测试一下， 也可以到问答区看看其他同学实现这个效果的思路哦，这样也会帮助自己更好的理解哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星