wow&&animate

最新推荐文章于 2024-02-28 13:11:06 发布

smartwange

最新推荐文章于 2024-02-28 13:11:06 发布

阅读量463

点赞数

分类专栏： css 文章标签： wow animate

本文链接：https://blog.csdn.net/qq_21383977/article/details/80166785

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css"/>
	<body>
		<p class="wow  bounce">多喝水电视剧</p>
	</body>
	<script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
		　wow = new WOW({
			animateClass:'animated'
		 });
		 
//		 data-wow-duration（动画持续时间）、
//		 data-wow-delay（动画延迟时间）、
//		 data-wow-offset（元素的位置露出后距离底部多少像素执行）
//		 和data-wow-iteration（动画执行次数）这四个属性可选可不选
             wow.init();
    </script>
</html>

说明：在https://daneden.github.io/animate.css/选择效果，直接加上wow和对应效果名称

深入应用可以将特效加入脚本中：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css"/>
	<body>
		<p class="wow  bounce">多喝水电视剧</p>
		<div class="dd">
			<h3>反倒是官方的若干头发的方</h3>
			<h3>突然一天半TV日本与太容易GV</h3>
		</div>
	</body>
	<script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
		　wow = new WOW({
			animateClass:'animated'
		 });
		 
//		 data-wow-duration（动画持续时间）、
//		 data-wow-delay（动画延迟时间）、
//		 data-wow-offset（元素的位置露出后距离底部多少像素执行）
//		 和data-wow-iteration（动画执行次数）这四个属性可选可不选
             wow.init();
             
             var dd=document.querySelector('.dd')
             dd.setAttribute('class','wow bounceInUp');
             dd.setAttribute('data-wow-delay','0.3s');
             dd.setAttribute('data-wow-duration','5s');
            
             dd.children[0].setAttribute('class','wow fadeInRightBig');
             dd.children[0].setAttribute('data-wow-delay','2s');
             
             dd.children[1].setAttribute('class','wow fadeInLeftBig');
             dd.children[1].setAttribute('data-wow-delay','2s');
             
    </script>
</html>

JS获取子节点、父节点和兄弟节点的若干种方式https://blog.csdn.net/laok_/article/details/75760572

smartwange

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
wow&&animate

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;link rel="stylesheet" type="text/css&quot
复制链接

扫一扫

专栏目录