CSS使用Animate.css制作动画效果_html/css_WEB-ITnose
一 使用Animate.css动画
// 通过@import引入外部CSS资源;
// 引入线上图片及JS文件;
// 通过更改CSS类名生成不同类型的CSS3动画;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <style> 7 /* Animate.css GitHub地址:https://github.com/daneden/animate.css */ 8 /* Animate.css 演示地址:https://daneden.github.io/animate.css/ */ 9 10 @import url("http://cdn.gbtags.com/animate.css/3.1.1/animate.min.css");11 body {12 background: #cfcfcf;13 }14 img {15 position: absolute;16 left: 50%;17 top:50%;18 margin-left: -100px;19 margin-top: -100px;20 width:200px;21 height:200px;22 }23 24 </style>25 <body>26 <img src="/static/imghw/default1.png" data-src="http://www.gbtags.com/gb/networks/uploadimg/074627f0-0a62-4176-aa85-06a4364deeab.png" class="lazy" alt="">27 </body>28 <script src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>29 <script>30 function rock (x) { // 定义事件函数;31 $('img').not('.center')32 .addClass(x + ' animated') // 添加CSS类名;33 .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'34 ,function(){35 $(this).removeClass();36 });37 };38 39 $(document).ready(function(){40 rock("rubberBand infinite"); // 添加CSS类名生成相应的动态效果;41 setTimeout(function(){window.lcation.href = "http://www.kiklink.com"},6000);42 // 设置时间跳转;43 });44 </script>45 </html>
二 自定义Animate.css动画
// 可以使用animate.css代码作为基础,编写自定义的动画效果;
1 @keyframes bounce { /*通过@keyframes规则,创建bounce动画;*/ 2 0%,20%,50%,80%,100% { 3 transform:translateY(0); 4 } 5 40% { 6 transform:translateY(-30px); 7 } 8 60% { 9 transform:translateY(-15px);10 }11 }12 .bounce {13 animation-name:bounce; /*调用bounce动画;*/14 }15 .animated {16 animation-duration:3s; /*一个动画周期的时长;*/17 animation-fill-mode:both; /*指定动画执行之前之后的样式;*/18 }19 .animated.infinite {20 animation-iteration-count:infinite; /*定义动画播放的次数;(n次/infinite无限次);*/21 }
1 <img class="animated bounce infinite lazy" src="/static/imghw/default1.png" data-src="http://www.gbtags.com/gb/laitu/150x150" alt="">
三 使用JavaScript控制动画
1 $('img').click(function(){ // 给Img元素绑定点击事件;2 var $this = $(this); // 鼠标点击之后添加相应的动画类名; 3 $this.addClass('animated bounce').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend',function(){4 //<strong> 当-webkit-animation动画结束之后会有一个webkitAnimationEnd事件;</strong>5 //<strong> 当one()方法监听到webkitAnimationEnd事件之后才执行function函数;one()方法只能执行一次;</strong>6 $this.removeClass(); // 清除相应的动画类名;7 })8 });
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
＆gt; gt;的目的是什么 元素？
Mar 21, 2025 pm 12:34 PM
本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati
＆lt; datalist＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:33 PM
本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159
＆lt; meter＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:35 PM
本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前
视口元标签是什么？为什么对响应式设计很重要？
Mar 20, 2025 pm 05:56 PM
本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。
＆lt; iframe＆gt;的目的是什么。 标签？使用时的安全考虑是什么？
Mar 20, 2025 pm 06:05 PM
本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。
HTML容易为初学者学习吗？
Apr 07, 2025 am 12:11 AM
HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。
HTML，CSS和JavaScript的角色：核心职责
Apr 08, 2025 pm 07:05 PM
HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。
HTML中起始标签的示例是什么？
Apr 06, 2025 am 12:04 AM
AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。
