了解c2c电商网站的特点,创新营销方式有哪些,2022年网页游戏排行榜,汽车配件外贸网站作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 #x1f449; WangMin animate.css是什么#xff1f;
animate.css 是一个有趣#xff0c;酷炫的#xff0c;跨浏览器的动画库#xff0c;里面包含了许多常用的css动画。你可以将它用于你的项目中 WangMin animate.css是什么
animate.css 是一个有趣酷炫的跨浏览器的动画库里面包含了许多常用的css动画。你可以将它用于你的项目中不管是主页滑动切换又或者是其它方面你都可以通过它来制作出惊人的效果。 我们要使用的它的话需要把它加到自己的页面中接着就可以在需要动画的元素标签上直接调用里面的动画然后调节动画次数延迟等达到自己需要的效果就可以了。
怎么获取 animate.css
1、从官网下载 animate.css 官方下载
2、使用在线cdn animate.css 在线地址https://unpkg.com/animate.css3.5.2/animate.min.css
怎么使用 animate.css
1引入CSS文件 相信大家对引入外部的CSS样式文件的代码以及快捷键应该很熟悉你只需要在HTML文件的head标签中引入CSS样式文件如下
!DOCTYPE html
htmlheadmeta charsetutf-8titleanimate-test/titlelink hrefcss/animate.min.css typetext/css relstylesheet//headbody/body
/html
2辅助类 给你想添加动画效果的元素添加一个 animated 类必需。如果需要动画循环运动你还需要给这个元素追加 infinite 类又或者自己另外定义一个类似于 infinite 的类。 3) 效果添加 接下来就是最后一步了也是最重要的一步为元素添加你想要的效果所对应的类名就可以查看效果了。简单列举几个
bounce 弹跳
flash 闪烁
pulse 放大缩小
rubberBand 放大缩小弹簧
shake 左右晃动
headShake 左右小幅晃动
swing 左右扇形摇摆
tada 放大左右上下晃动缩小
wobble 左右小幅(圆点较远)扇形摇摆
jello 左右左右上下晃动实例
!DOCTYPE html
htmlheadmeta charsetutf-8titleanimate-test/titlelink hrefcss/animate.min.css typetext/css relstylesheet/style typetext/css.box{width:200px;height:200px;background:#CCCCCC}/style/headbodydiv classbox animated bounce/div/body
/html具体动画效果可以自己实际操作然后运行浏览器查看。
下面来详细介绍animate.css里面的类
类名效果Attention晃动效果Bounce弹性缓冲效果Fade透明度变化效果Flip翻转效果Rotate旋转效果Slide滑动效果Zoom变焦效果Special特殊效果
还有一些辅助类
infinite 无限循环
delay-1sdelay-2sdelay-3sdelay-4sdelay-5s 延迟
fastfaster 持续时间快
slowslower 持续时间慢
如果你想要改变动画效果可以自定义配置如下
//初始默认
#yourElement{animate-duration: 1ms !important; //动画持续时间transition-duration: 1ms !important;animate-delay: 0; //动画延迟时间animate-iteration-count: 1 !important; //动画执行次数
}如果想要动画不停地执行可以将animate-iteration-count: infinite 或者直接在元素上添加类 .infinite 。
另外还有一种使用方法那就是通过 jQuery 或者自己定义的 CSS 规则来给目标元素一次性添加对应效果的 class 类。如下
$(#yourElement).addClass(animated bounceOutLeft);当然如果不想要元素使用某个动画效果也可以通过 jQuery 来删除相应效果的类就可以了如下
$(#yourElement).removeClass(animated bounceOutLeft);兼容
浏览器兼容当然是只兼容支持 CSS3 animate 属性的浏览器他们分别是IE10、Firefox、Chrome、Opera、Safari。 以上仅是个人见解若有不足之处欢迎在下方评论指出那就先分享到这里!! 后续继续更新!!
