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.发光的盒子
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代码