我想让孩子们的文字完全位于旋转div中。这样文本就一直处于中间位置。我没有遇到过一个解决方案,但是我尝试用绝对的方式来定位它,并且"删除"孩子的过渡。下面是一个附有问题的jsfiddle。
HTML:
<div class="parent">
<div class="child">This is child</div>
</div>
CSS:
@-webkit-keyframes rotate {
from{ -webkit-transform: rotate(0deg); }
to{ -webkit-transform: rotate(360deg); }
}
.parent {
width: 100px;
height: 100px;
border-radius: 50%;
background: #000;
position: relative;
top: 25%;
border: 10px dashed red;
-webkit-animation: rotate 12s linear infinite;
}
.child {
position: absolute;
color: #fff;
-webkit-animation: none !important;
}
答案 0 :(得分:2)
我认为你不应该使用父/子关系。让他们成为一个容器内的兄弟姐妹(我保留了类名只是为了显示差异):
<div class="container">
<div class="parent"></div>
<div class="child">This is child</div>
</div>
<强> CSS 强>
@-webkit-keyframes rotate {
from{ -webkit-transform: rotate(0deg); }
to{ -webkit-transform: rotate(360deg); }
}
.parent {
width: 100px;
height: 100px;
border-radius: 50%;
background: #000;
position: relative;
top: 25%;
border: 10px dashed red;
-webkit-animation: rotate 12s linear infinite;
}
.container{
position: relative;
}
.child {
position: absolute;
top: 50px;
left: 20px;
color: #fff;
-webkit-animation: none !important;
}
这是更新的JSFiddle