1.Animate.css简介

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

（福利推荐：阿里云、腾讯云、华为云服务器最新限时优惠活动，云服务器1核2G仅88元/年、2核4G仅698元/3年，点击这里立即抢购>>>）

2.动画效果的实现

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

1.发光的盒子

b8b6b39eb9d283e05c05e143b6fadbef.png

wxml代码：

I am LetCode!

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.文字的缩放效果

88ab86d9dc412a8bed74dba9e283bb2e.png

wxml代码：

关注公众号“Java技术迷”,有更多分享！

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.055, 0.675, 0.19);

}

to

{
opacity: 0;

transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);

animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);

}

}

.animate_zoomOutDown

{
animation:2s linear 0s infinite alternate zoomOutDown;

font-family: Arial;

font-size: 18px;

font-weight: bold;

color: white;

margin-top: 70px;

text-align: center;

margin-top: 15px;

}

3.加载动画

56c623f3380fe3a1af451d93839c4735.png

wxml代码：

关注公众号“Java技术迷”,有更多分享！

wxss代码：

.load-container

{
width: 240px;

height: 240px; margin: 0 auto;

position: relative;

overflow: hidden;

box-sizing: border-box;

}

.load .loader

{
color: #ffffff; font-size: 90px; text-indent: -9999em; overflow: hidden;

width: 1em; height: 1em; border-radius: 50%;

margin: 72px auto;

position: relative; transform: translateZ(0);

animation: load 1.7s infinite ease, round 1.7s infinite ease;

} @keyframes load

{
0%

{ box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;

}

5%, 95%

{ box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;

}

10%, 59%

{
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;

}

20% { box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;

}

38% { box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;

}

100% { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;

}

}

@keyframes round

{
0%

{
transform: rotate(0deg);

}

100%

{
transform: rotate(360deg);

}

}

4.抖动的文字

4246a418865c9ad4f528b3288d40ba51.png

wxml代码：

关注公众号“Java技术迷”,有更多分享！

wxss代码：

@keyframes shake-slow

{
2%

{
transform: translate(6px, -2px) rotate(3.5deg);

}

4%

{
transform: translate(5px, 8px) rotate(-0.5deg);

}

6%

{ transform: translate(6px, -3px) rotate(-2.5deg);

}

8%

{ transform: translate(4px, -2px) rotate(1.5deg);

}

10%

{
transform: translate(-6px, 8px) rotate(-1.5deg);

}

12%

{
transform: translate(-5px, 5px) rotate(1.5deg);

}

14% { transform: translate(4px, 10px) rotate(3.5deg);

} 16% { transform: translate(0px, 4px) rotate(1.5deg);

} 18% { transform: translate(-1px, -6px) rotate(-0.5deg);

} 20% { transform: translate(6px, -9px) rotate(2.5deg);

}

22% { transform: translate(1px, -5px) rotate(-1.5deg);

} 24% { transform: translate(-9px, 6px) rotate(-0.5deg);

} 26% { transform: translate(8px, -2px) rotate(-1.5deg);

}

28% { transform: translate(2px, -3px) rotate(-2.5deg); }

30%

{ transform: translate(9px, -7px) rotate(-0.5deg); }

32%

{ transform: translate(8px, -6px) rotate(-2.5deg); }

34%

{ transform: translate(-5px, 1px) rotate(3.5deg); }

36%

{ transform: translate(0px, -5px) rotate(2.5deg); }

38%

{ transform: translate(2px, 7px) rotate(-1.5deg); }

40%

{ transform: translate(6px, 3px) rotate(-1.5deg); }

42%

{ transform: translate(1px, -5px) rotate(-1.5deg); }

44%

{ transform: translate(10px, -4px) rotate(-0.5deg); }

46% { transform: translate(-2px, 2px) rotate(3.5deg); }

48% { transform: translate(3px, 4px) rotate(-0.5deg); }

50% { transform: translate(8px, 1px) rotate(-1.5deg); }

52% { transform: translate(7px, 4px) rotate(-1.5deg); }

54% { transform: translate(10px, 8px) rotate(-1.5deg); }

56% { transform: translate(-3px, 0px) rotate(-0.5deg); }

58% { transform: translate(0px, -1px) rotate(1.5deg); }

60% { transform: translate(6px, 9px) rotate(-1.5deg); }

62% { transform: translate(-9px, 8px) rotate(0.5deg); }

64% { transform: translate(-6px, 10px) rotate(0.5deg); }

66% { transform: translate(7px, 0px) rotate(0.5deg); }

68% { transform: translate(3px, 8px) rotate(-0.5deg); }

70% { transform: translate(-2px, -9px) rotate(1.5deg); }

72% { transform: translate(-6px, 2px) rotate(1.5deg); }

74% { transform: translate(-2px, 10px) rotate(-1.5deg); }

76% { transform: translate(2px, 8px) rotate(2.5deg); }

78% { transform: translate(6px, -2px) rotate(-0.5deg); }

80% { transform: translate(6px, 8px) rotate(0.5deg); }

82% { transform: translate(10px, 9px) rotate(3.5deg); }

84% { transform: translate(-3px, -1px) rotate(3.5deg); }

86% { transform: translate(1px, 8px) rotate(-2.5deg); }

88% { transform: translate(-5px, -9px) rotate(2.5deg); }

90% { transform: translate(2px, 8px) rotate(0.5deg); }

92% { transform: translate(0px, -1px) rotate(1.5deg); }

94% { transform: translate(-8px, -1px) rotate(0.5deg); }

96% { transform: translate(-3px, 8px) rotate(-1.5deg); }

98%

{
transform: translate(4px, 8px) rotate(0.5deg);

}

0%,100%

{
transform: translate(0, 0) rotate(0);

}

}

.shake-slow

{
animation:shake-slow 5s infinite ease-in-out;

}

在实际开发过程中，远不止这些炫酷的动画效果，在互联网迅速的发展状态下，还需要更多的程序员来实现功能需求，因此本文只做简单的介绍，未完待续…..

---

你还在原价购买阿里云、腾讯云、华为云、天翼云产品？那就亏大啦！现在申请成为四大品牌云厂商VIP用户，可以3折优惠价购买云服务器等云产品，并且可享四大云服务商产品终身VIP优惠价，还等什么？赶紧点击下面对应链接免费申请VIP客户吧：

1、点击这里立即申请成为腾讯云VIP客户

2、点击这里立即注册成为天翼云VIP客户

3、点击这里立即申请成为华为云VIP客户

4、点击这里立享阿里云产品终身VIP优惠价