Html Sass和关键帧
我正在尝试使用css关键帧创建一个旋转的圆,但是我很难在Sass中使用它 这是我的html:Html Sass和关键帧,html,css,sass,css-animations,prepros,Html,Css,Sass,Css Animations,Prepros,我正在尝试使用css关键帧创建一个旋转的圆,但是我很难在Sass中使用它 这是我的html: <div class="content"> <h1 class="h1">Playing around with keyframes</h1> <div class="circle"></div> </div> 我使用prepos编译sas,输出如下(注意关键帧中的类): 这似乎是特定于Sass 3.3的。@关键帧
<div class="content">
<h1 class="h1">Playing around with keyframes</h1>
<div class="circle"></div>
</div>
我使用prepos编译sas,输出如下(注意关键帧中的类):
这似乎是特定于Sass 3.3的。
@关键帧
构造没有正确地冒泡到顶部。如果无法升级到3.4,只需停止嵌套关键帧即可
.content{
display:block;
position: relative;
box-sizing:border-box;
.circle{
width: 220px;
height: 220px;
border-radius: 50%;
padding: 10px;
border-top: 2px solid $pink;
border-right: 2px solid $pink;
border-bottom: 2px solid $pink;
border-left: 2px solid #fff;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
相关:适合我-哦,很有趣!至少我知道我是对的。谢谢:)
@-moz-keyframes spin {
.lesson-page .content 100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
.lesson-page .content 100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
.lesson-page .content 100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.content{
display:block;
position: relative;
box-sizing:border-box;
.circle{
width: 220px;
height: 220px;
border-radius: 50%;
padding: 10px;
border-top: 2px solid $pink;
border-right: 2px solid $pink;
border-bottom: 2px solid $pink;
border-left: 2px solid #fff;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }