css实现快速抖动效果_通过CSS实现炫酷的动画效果
1.Animate.css简介
Animate.css是⼀个可在您的Web项⽬中使⽤的即⽤型跨浏览器动画库。⾮常适合强调，⾸页，滑块和引导注意的提⽰。它是⼀个来⾃国Animate.css
css特效文字外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡⼊淡
Animate.css 能够很⽅便、快速的制作
出（fadeIn/fadeOut）等多达 60 多种动画效果，⼏乎包含了所有常见的动画效果。虽然借助Animate.css
Animate.css 的代码，也许你能从中学到⼀些东西。不论是在Web端和⼩程序内都可以正常使⽤，详CSS3 动画效果，但还是建议看看Animate.css
细内容请到官⽅地址学习。
2.动画效果的实现
在使⽤过程中，可以根据⾃⼰的喜好来改造css代码来达到你想要的效果，⽂中动图显⽰可能不是特别直观，建议⾃⼰写⼀遍代码，即利于学习，⼜能够直观的体会到动画效果。
1.发光的盒⼦
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.⽂字的缩放效果
wxml代码：
<view class="animate_zoomOutDown">关注“Let编程”，有更多分享！</view>
wxss代码：
@keyframes zoomOutDown {  40% {  opacity: 1;  transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);  animation-timing-function: cubic-bezier(0.55, 0 3.加载动画
wxml代码：
<view class="load-container load">  <view class="loader">  </view> </view> <view class="txt">关注“Let编程”，有更多分享！</view>
wxss代码：
.load-container {  width: 240px;  height: 240px;  margin: 0 auto;  position: relative;  overflow: hidden;  box-sizing: border-box; }  .load .loader {  color: #ffffff;  font-s 4.抖动的⽂字
wxml代码：
<view class="shake-slow txt">关注“Let编程”，有更多分享！</view>
wxss代码：
@keyframes shake-slow {  2% {  transform: translate(6px, -2px) rotate(3.5deg);  }  4% {  transform: translate(5px, 8px) rotate(-0.5deg);  }  6% {  transform: tran 在实际开发过程中，远不⽌这些炫酷的动画效果，在互联⽹迅速的发展状态下，还需要更多的程序员来实现功能需求，因此本⽂只做简单的
介绍，未完待续.....

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。