微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

html中字的抖动怎么设置

HTML中的字体抖动可以通过CSS中的"animation"属性实现。该属性可以为元素设置一个动画,在一段时间内不断重复播放。

/*在CSS中设置抖动动画*/
@keyframes shake {
  0% { transform: translate(2px,1px) rotate(0deg); }
  10% { transform: translate(-1px,-2px) rotate(-1deg); }
  20% { transform: translate(-3px,0px) rotate(1deg); }
  30% { transform: translate(0px,2px) rotate(0deg); }
  40% { transform: translate(1px,-1px) rotate(1deg); }
  50% { transform: translate(-1px,2px) rotate(-1deg); }
  60% { transform: translate(-3px,1px) rotate(0deg); }
  70% { transform: translate(2px,1px) rotate(-1deg); }
  80% { transform: translate(-1px,-1px) rotate(1deg); }
  90% { transform: translate(2px,2px) rotate(0deg); }
  100% { transform: translate(1px,-2px) rotate(-1deg); }
}

html中字的抖动怎么设置

以上代码为创建一个名为"shake"的抖动动画,并设置了一个12个keyframes。

接下来在要进行抖动的元素中,通过CSS中的"animation"属性调用该动画:

/*在CSS中设置元素抖动*/
h1{
  animation: shake 0.5s infinite;
}

以上代码为在h1标题中应用了名为"shake"的抖动动画,并设置了0.5s时长并且无限播放。

通过以上设置,HTML页面中的文字就可以实现抖动效果了。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐