jquery 页面载入特效

最新推荐文章于 2024-01-12 14:24:05 发布

a771948524

最新推荐文章于 2024-01-12 14:24:05 发布

阅读量972

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/zxlstudio/article/details/36895097

版权

web 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

过度动画

<?php



?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>

	<script src="http://cdn.bootcss.com/jquery/2.0.3/jquery.js"></script>

	<style type="text/css">
		.loader{
            width: 100%;
            height: 100%;
            top:0;
            left: 0;
            position: fixed;
            background: #2c3e50;
            z-index: 9999999;
            -webkit-transition: all .25s ease-in-out;
             -moz-transition: all .25s ease-in-out;
              -ms-transition: all .25s ease-in-out;
               -o-transition: all .25s ease-in-out;
                  transition: all .25s ease-in-out;
        }
		.spinner {
        	width: 100px;
        	height: 100px;
        	left: 50%;
        	top:50%;
        	margin-top: -50px;
        	margin-left: -50px;
        	position: fixed;
        	opacity: 1;
        }
		.double-bounce1, .double-bounce2 {
        	width: 100%;
        	height: 100%;
        	border-radius: 50%;
        	background-color: #fff;
        	opacity: 0.6;
        	position: absolute;
        	top: 0;
        	left: 0;
          	-webkit-animation: bounce 2.0s infinite ease-in-out;
          	animation: bounce 2.0s infinite ease-in-out;
        }
        .double-bounce2 {
        	-webkit-animation-delay: -1.0s;
        	animation-delay: -1.0s;
        }


	</style>
	<script type="text/javascript">
		$(window).load(function(){
            $(".loader").css("opacity",0);
            setTimeout(function(){$(".loader").css("display","none");},600);      
        });

	</script>
</head>
<body>

	<div class="loader">
		<div class="spinner">
			<div class="double-bounce1"></div>
			<div class="double-bounce2"></div>
		</div>
	</div>

</body>
</html>

a771948524

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 页面载入特效

过度动画<?php?> Document .loader{ width: 100%; height: 100%; top:0; left: 0; position: fixed; background: #2c3e
复制链接

扫一扫

专栏目录