Animate 动画样式

最新推荐文章于 2024-07-18 17:23:14 发布

HorsePower_

最新推荐文章于 2024-07-18 17:23:14 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/HorsePower_/article/details/124329223

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

animate css动画样式

项目测试

复制下面代码，你就可以尝试使用animate 实现动画效果啦
<!DOCTYPE>
<html>
    <head>
        <title>animate测试</title>
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" />
   
    </head>
    <body>
  
       

        <div class="animated bounce">弹跳效果</div>

     

    </body>

效果图
在这里插入图片描述


<!DOCTYPE>
<html>
    <head>
        <title>animate测试</title>
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" />
    <style>
        #box{
            width:100px;
            height:100px;
            background:#ff0000;
        }
        </style>
    </head>
    <body>
    <div class="animated" id="box">animate</div>
        <button id="add">add</button>
        <button id="remove">remove</button>
        <script>
            var add = document.getElementById('add');
            var remove = document.getElementById('remove');
            var box = document.getElementById('box');
            add.onclick = function(){
            box.classList.add("bounceInLeft");
            box.classList.remove("bounceOutLeft");
            }
            remove.onclick = function(){
            box.classList.add("bounceOutLeft");
            box.classList.remove("bounceInLeft");
            }
        </script>
    </body>


<!DOCTYPE>
<html>
    <head>
        <title>animate测试</title>
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" />
   
    </head>
    <body>
    
        <h1 class="animated hinge">PHP中文网</h1>
        
    </body>

效果图：

在这里插入图片描述
3.


<!DOCTYPE>
<html>
    <head>
        <title>animate测试</title>
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" />
   
    </head>
    <body>
    
        <button class="btn">点击</button>

        <h1>PHP中文网</h1>

        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

        <script type="">

            $(function(){

                $(".btn").click(function(){

                    $("h1").addClass('animated shake');

                 

                });

            })

        </script>

    </body>

效果图
在这里插入图片描述 4，同样我们还可以使用动画延迟和动画迭代计数更改动画中的延迟和播放的次数


<!DOCTYPE>
<html>
    <head>
        <title>animate测试</title>
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" />
   
    </head>
    <body>
        <style>
            .animated{

-webkit-animation-iteration-count:5;

-webkit-animation-duration:1s;

animation-iteration-count:5;

animation-duration:1s;

}
        </style>
    
        <button class="btn">点击</button>

        <h1>PHP中文网</h1>

        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

        <script type="">

            $(function(){

                $(".btn").click(function(){

                    $("h1").addClass('animated shake');

                 

                });

            })

        </script>

    </body>

参考链接
 参考链接
 参考链接