css动画插件 - animation.css的基本使用

最新推荐文章于 2022-11-21 13:16:59 发布
最新推荐文章于 2022-11-21 13:16:59 发布
阅读量140 收藏
点赞数
分类专栏： CSS/HTML 文章标签： css 动画 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tian_tian_gong/article/details/89466994
版权 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <style>
        .testa {
            -webkit-animation: bounceIn 1s 1s;
        }

        .testb {
            -webkit-animation: bounceIn 1s 2s;
        }

        .testc {
            -webkit-animation: bounceIn 1s 3s;
        }

        .testd {
            -webkit-animation: bounceIn 1s 4s;
        }
        dd:hover{
            cursor: pointer;
            color: orange;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="row">
            <br>
            <br>
            <div class="col-lg-3 testa">hello world</div>
            <div class="col-lg-3 testb">console.log</div>
            <div class="col-lg-3 testc">document.write</div>
            <div class="col-lg-3 testd">alert</div>
        </div>
        <br>
        <hr>
        <br>
        <!-- <div class="row">
            <input id="animationName" type="text">
            <button id="addBtn">addClass</button>
        </div> -->
        <div class="row">
            <div class="col-lg-12">
                <h2 id="test">HELLO WORLD</h2>
            </div>
            <br>
            <hr>
            <br>
            <div class="row">
                <div class="col-lg-3">
                    <dl>
                        <dt>Attention(晃动效果)</dt>
                        <dd>bounce</dd>
                        <dd>flash</dd>
                        <dd>pulse</dd>
                        <dd>rubberBand</dd>
                        <dd>shake</dd>
                        <dd>headShake</dd>
                        <dd>swing</dd>
                        <dd>tada</dd>
                        <dd>wobble</dd>
                        <dd>jello</dd>
                    </dl>
                </div>

                <div class="col-lg-3">
                    <dl>
                        <dt>bounce(弹性缓冲效果)</dt>
                        <dd>bounceIn</dd>
                        <dd>bounceInDown</dd>
                        <dd>bounceInRight</dd>
                        <dd>bounceInUp</dd>
                        <dd>bounceOut</dd>
                        <dd>bounceOutDown</dd>
                        <dd>bounceOutLeft</dd>
                        <dd>bounceOutRight</dd>
                        <dd>bounceOutUp</dd>
                    </dl>
                </div>
                <div class="col-lg-3">
                    <dl>
                        <dt>fade(透明度变化效果)</dt>
                        <dd>fadeIn</dd>
                        <dd>fadeInDown</dd>
                        <dd>fadeInDownBig</dd>
                        <dd>fadeInLeftBig</dd>
                        <dd>fadeInRight</dd>
                        <dd>fadeInRightBig</dd>
                        <dd>fadeInUp</dd>
                        <dd>fadeInUpBig</dd>
                        <dd>fadeOut</dd>
                        <dd>fadeOutDown</dd>
                        <dd>fadeOutDownBig</dd>
                        <dd>fadeOutLeft</dd>
                        <dd>fadeOutLeftBig</dd>
                        <dd>fadeOutRight</dd>
                        <dd>fadeOutRightBig</dd>
                        <dd>fadeOutUp</dd>
                        <dd>fadeOutUpBig</dd>
                    </dl>
                </div>
                <div class="col-lg-3">
                    <dl>
                        <dt>flip(翻转效果)</dt>
                        <dd>flipInX</dd>
                        <dd>flipInY</dd>
                        <dd>flipOutX</dd>
                        <dd>flipOutY</dd>
                    </dl>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-3">
                    <dl>
                        <dt>rotate(旋转效果)</dt>
                        <dd>rotateIn</dd>
                        <dd>rotateInDownLeft</dd>
                        <dd>rotateInDownRight</dd>
                        <dd>rotateInUpLeft</dd>
                        <dd>rotateInUpRight</dd>
                        <dd>rotateOut</dd>
                        <dd>rotateOutDownLeft</dd>
                        <dd>rotateOutDownRight</dd>
                        <dd>rotateOutUpLeft</dd>
                        <dd>rotateOutUpRight</dd>
                    </dl>
                </div>
                <div class="col-lg-3">
                    <dl>
                        <dt>slide(滑动效果)</dt>
                        <dd>slideInDown</dd>
                        <dd>slideInLeft</dd>
                        <dd>slideInRight</dd>
                        <dd>slideInUp</dd>
                        <dd>slideOutDown</dd>
                        <dd>slideOutLeft</dd>
                        <dd>slideOutRight</dd>
                        <dd>slideOutUp</dd>
                    </dl>
                </div>
                <div class="col-lg-3">
                    <dl>
                        <dt>zoom(变焦效果)</dt>
                        <dd>zoomIn</dd>
                        <dd>zoomInDown</dd>
                        <dd>zoomInLeft</dd>
                        <dd>zoomInRight</dd>
                        <dd>zoomInUp</dd>
                        <dd>zoomOut</dd>
                        <dd>zoomOutDown</dd>
                        <dd>zoomOutLeft</dd>
                        <dd>zoomOutRight</dd>
                        <dd>zoomOutUp</dd>
                    </dl>
                </div>
                <div class="col-lg-3">
                    <dl>
                        <dt>special(特殊效果)</dt>
                        <dd>hinge</dd>
                        <dd>rollIn</dd>
                        <dd>rollOut</dd>
                        <dd>lightSpeedIn</dd>
                        <dd>lightSpeedOut</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(function () {
            // $("#addBtn").click(function () {
            //     var animationName = $("#animationName").val();
            //     $("#test").removeClass().addClass(animationName + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
            //         $(this).removeClass();
            //     })
            // })
            $("dd").click(function(){
                var animationName = $(this).html();
                $("#test").removeClass().addClass(animationName + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
                    $(this).removeClass();
                })
            })
        })
    </script>

</body>

</html>
飒小北
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue动画库-Animate.css的使用以及部分问题
f20212001的博客
05-09 675
vue动画库-Animate.css的使用以及部分问题 Animate.css在vue脚手架中的使用 详情见官网： Animate.css | A cross-browser library of CSS animations. 两种使用方式 在style中使用 <transition name="slide-fade"> <div class="box" v-if="show" ></div> </transition> .
二、animate.css动画插件
qianduankaifawz的博客
10-25 1711
css3动画库，预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、旋转（rotateIn|rotateOut）、翻转（flip）、淡入淡出（fadeIn|fadeOut）等动画效果。1、过渡动画是需要触发条件的(hover事件或click事件等)，只能完成简单的动画。2、加统一的类名animated，然后选择自己想要的动画效果，然后复制粘贴。第一个animated是必须添加的样式名，第二个是指定的动画样式名。2、帧动画不需要任何的触发条件，可以完成复杂轨迹的动画。
第三方动画库animation.css
热门推荐
Liberty_yes的博客
01-29 2万+
vue动画，css动画，使用第三方动画库animation.css轻松实现多种动画炫酷的效果！
使用animate.css动画插件
ljw_jiawei的博客
05-12 1729
        1.提示:使用animate.css导航里面的li或者a后面的线不能用border,用背景图 2.将animate.css在头部链接上 3.在animate.css官网上看看用什么动画和需用动画的名字 http://daneden.github.io/animate.css/ 4.在js中把想给动画的元素加两个类就可以,第一个类固定是animated,第二个类是动画的名字(也可以...
CSSanimation和SwiperAnimation插件
qq_33200168的博客
11-06 569
css的animation属性是css3新增的一个动画属性，这个属性比较简单实用，甚至可以替代一些要js才能做的动画。 语法: 值 说明 animation-name 绑定 frames的名字 animation-duration 动画需要在多少秒完成 animation-delay 动画延迟多少秒触发 animation-timeing-function 动画运动的方...
Animation.css学习笔记
weixin_34228617的博客
12-08 428
animation.css是一款非常炫酷、有趣、跨浏览器的预设css3动画库，便于你在项目中引用。安装npm install animate.css --save 或者 yarn add animate.css 或者直接下载使用在项目中引用&lt;head&gt; &lt;link rel="stylesheet" href="animate.min.css"&gt; &lt;/head...
sublime text css动画插件-Animate.css-Snippets
sunny_girls的专栏
03-11 1441
Animate.css-Snippets是可以生成Animate.css动画代码的sublime text插件。 例如键入：animatecss-bounceOutDown 将生成以下代码： @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: transl
vue 使用animate.css动画库
q4717529的博客
11-21 1040
vue 使用animate.css动画库
animation.css实现动画旋转特效.zip
11-16
例如，使用jQuery来启动一个CSS动画： ```javascript $('.my-element').click(function() { $(this).addClass('is-rotating'); }); ``` 这里，`.my-element`是点击后触发旋转的元素，`is-rotating`是添加到元素上...
css3-animation-generator：chrome插件css3动画生成器
02-05
Chrome插件Css3动画快速给页面加上炫酷酷css3动画的chrome插件。使用1.从chrome webstore下载2.直接下载crx文件如果无法访问到chrome的应用商城，可以选择下载app.crx文件，在chrome中打开chrome://extensions/页面...
css3全屏立体展示动画插件reveal.js.zip
最新发布
09-25
标题中的“css3全屏立体展示动画插件reveal.js.zip”指的是一个基于CSS3技术的全屏动画展示工具，名为Reveal.js。Reveal.js是一个开源的JavaScript框架，专门用于创建高质量的幻灯片演示文稿，它充分利用了CSS3的新...
css3点击动画效果.zip
09-25
CSS3动画主要通过`@keyframes`规则来定义，这个规则允许我们创建自定义的动画效果。通过指定动画过程中的各个关键帧，我们可以控制元素在不同时间点的样式，从而形成平滑的过渡效果。例如： ```css @keyframes ...
CSS3AnimationMenus-CSS3动画菜单10例.zip
09-23
"CSS3 Animation Menus-CSS3动画菜单10例.zip"这个压缩包文件就包含了十个使用CSS3实现的动态菜单示例，这些示例适用于那些寻求创新和互动性的网页设计师。通过深入学习和理解这些实例，我们可以掌握如何利用jQuery...
CSS3特效-移动端开关按钮样式
tian_tian_gong的博客
01-25 2486
在移动web中，经常会用到一个开关按钮。 其本质是checkbox。 效果图 代码 //css /*switch*/ .switch { position: relative; display: inline-block; width: 50px; height: 30px; } .switch input[type=checkbox] { display: none;...
CSS3特效-自定义radio 单选列表勾选样式
tian_tian_gong的博客
01-25 2221
单选列表勾选样式( radio) 效果图: 代码: //css /*ridio tick*/ .radio--tick { display: none; } .radio--tick+label { display: inline-block; width: 100%; position: relative; } .radio--tick+label:after{ conte...
让你的网页，点哪都是小心心~~~
tian_tian_gong的博客
11-20 1753
效果如下: 简单粗暴的代码: &amp;lt;script&amp;gt; !function (e, t, a) { function r() { for (var e = 0; e &amp;lt; s.length; e++) s[e].alpha &amp;lt;= 0 ? (t.body.removeChild(s[e].el), s.splice(e, ...
CSS3特效-自定义checkbox样式
tian_tian_gong的博客
01-25 1598
前言: 在实际开发过程中，大多数时候都不会用原生的checkbox样式，因为太丑了， 如果我们不用任何ui库的话， 就要手动写一个了， 原理就是将默认的checkbox 的input标签隐藏掉， 然后在与其一套的label标签前/后加一个checkbox的图标(可以是图片，也可以使svg，这里我们用的svg). 效果图: 代码: //css .checkbox{ displa...
CSS3特效-帧动画动起来
tian_tian_gong的博客
01-25 693
在油管上看到的一个教程， 感觉挺好玩的， 照着做了一下，代码没有几行，就是根据图片定位， 让每一帧动画显示出来。 运行效果: 代码: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport&
CSS- 利用bootstrap完善表格之内容过多
tian_tian_gong的博客
03-14 639
表格中td的内容过多，希望通过省略号来表示， 当hover内容的时候，利用bootstrap tip提示信息， 展示出完整内容。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" c
HTML5与CSS3第二版：提升现代网络技术
3. **过渡和动画**：添加了transition和animation属性，可以创建平滑的动画效果，提升用户体验。 4. **媒体查询**：media queries允许根据设备特性和视口大小应用不同的样式，是响应式设计的基础。 5. **边框和背景*...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值