[英]why keyframes animation don't work for <a>?
i make a pulsing circular menu everything else works well, so here is the part where i need to add animation我制作了一个脉冲圆形菜单,其他一切都很好,所以这是我需要添加 animation 的部分
@import url("https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); @import "compass/css3"; .menu-button { position: absolute; top: calc(50% - 30px); left: calc(50% - 30px); text-decoration: none; text-align: center; color: #ffffff; border-radius: 50%; display: block; height: 40px; width: 40px; line-height: 40px; padding: 10px; background: #0081ee; box-shadow: 0 0 0 0 rgba(#0081ee, 0.5); -webkit-animation: pulse 1.5s infinite; }.menu-button:hover { -webkit-animation: none; } @-webkit-keyframes pulse { 0% { @include transform(scale(0.9)); } 70% { @include transform(scale(1)); box-shadow: 0 0 0 50px rgba(#0081ee, 0); } 100% { @include transform(scale(0.9)); box-shadow: 0 0 0 0 rgba(#0081ee, 0); } }
<a href="" class="menu-button fa fa-bars fa-2x"></a>
but nothing happens what's a problem?但什么也没发生有什么问题? tell me please
请告诉我
The @include
-rule is part of SASS, and is used with SASS identifiers. @include
规则是 SASS 的一部分,并与 SASS 标识符一起使用。
What you mean is the transform
-property.你的意思是
transform
属性。 Use it like this:像这样使用它:
transform: scale(0.9);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.