专栏首页前端开发随笔animate.css+wow.js实现网页动画

animate.css+wow.js实现网页动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>animate动画</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css">

</head>
<style>
    .wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 200px;
        flex-wrap: wrap;
        width: 1200px;
        margin: auto;
    }

    .wrap div {
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: lightseagreen;
        margin: 50px;
    }

    .btn {
        width: 200px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background: lightseagreen;
        color: #fff;
        cursor: pointer;
        animation-duration: 2s;
        animation-delay: 300ms;
        animation-iteration-count: infinite;
        animation-name: pulse;
    }
</style>

<body>
    <div class="btn">点击动画</div>
    <div class="wrap">
        <div id="one" class="wow bounceInDown"></div>
        <div class="wow zoomInDown"></div>
        <div class="wow flipInY"></div>
        <div class="wow pulse"></div>
        <div class="wow rubberBand"></div>
        <div class="wow shake"></div>
        <div class="wow swing"></div>
        <div class="wow tada"></div>
        <div class="wow wobble"></div>
        <div class="wow jello"></div>
        <div class="wow heartBeat"></div>
        <div class="wow bounceInRight"></div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/wow/0.1.11/wow.min.js"></script>
<script>
    $(function () {
        // 初始化wow
        new WOW().init();
        $.fn.extend({
            animateCss: function (animationName) {
                var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
                $(this).addClass('animated ' + animationName).one(animationEnd, function () {
                    $(this).removeClass('animated ' + animationName);
                });
            }
        });
        $('.btn').on('click', function () {
            $('.wrap').animateCss('bounceInUp');
        });
    });
</script>

</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue里v-for循环双层数组

    任我行RQ
  • scrollReveal实现网页重复动画效果

    任我行RQ
  • Css实现瀑布流布局

    我们只需要设置最外层的父级(waterfall)和子级的父元素(poster)的css就可以

    任我行RQ
  • Float浮动

    CSS中float属性会使元素浮动,使元素向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

    WindrunnerMax
  • 简单实用的纯CSS百分比圆形进度条代码解析/源码下载

    percircle是一款简单实用的纯CSS百分比圆形进度条插件。你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮...

    用户5997198
  • 无缝滚动案例简单实现代码

    <!doctype html> <html> <meta charset="utf-8"> <head> <title></title> <st...

    用户1730674
  • 如何清除浮动

    如何清除浮动 大家都知道,浮动会对文档产生影响,具体来看看会对文档产生什么影响? 清除浮动后的效果: ? 未清除浮动后的效果: ? 实例代码(未清除浮动): ...

    HTML5学堂
  • 一起学爬虫——使用xpath库爬取猫眼电

    之前分享了一篇使用requests库爬取豆瓣电影250的文章,今天继续分享使用xpath爬取猫眼电影热播口碑榜

    py3study
  • jQuery第十三篇 内容选择器(:empty :parent :contains(text) :has(selector)

    用户7873631
  • Python爬虫获取豆瓣电影并写入excel

    这篇文章主要介绍了Python爬虫获取豆瓣电影并写入excel ,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考...

    python学习教程

扫码关注云+社区

领取腾讯云代金券