css实现快速抖动效果_通过CSS实现炫酷的动画效果

1.Animate.css简介

Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库。非常适合强调,首页,滑块和引导注意的提示。它是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。虽然借助Animate.css 能够很方便、快速的制作 CSS3 动画效果,但还是建议看看Animate.css 的代码,也许你能从中学到一些东西。不论是在Web端和小程序内都可以正常使用,详细内容请到官方地址学习。

2.动画效果的实现

在使用过程中,可以根据自己的喜好来改造css代码来达到你想要的效果,文中动图显示可能不是特别直观,建议自己写一遍代码,即利于学习,又能够直观的体会到动画效果。

1.发光的盒子

a829c006974b702afb40c13b3e833c8b.png

wxml代码:

<view id="box">I am LetCode!</view>

wxss代码:

@keyframes animated-border {
      
0% {
      box-shadow: 0 0 0 0 rgba(255,255,255,0.4);   }  
100% {
      box-shadow: 0 0 0 20px rgba(255,255,255,0);   } 
} 
#box {
     
  animation: animated-border 1.5s infinite;
  height: 100rpx;
  font-family: Arial;
  font-size: 18px;
  font-weight: bold;
  color: white;
  border: 2px solid;
  border-radius: 10px;
  margin: 100px 15px;
  line-height: 100rpx;
  text-align: center;
}

2.文字的缩放效果

ac817519e904d565088807ebffd940ec.png

wxml代码࿱

  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值