jquery+css3飞机窗口动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery+css3飞机窗口动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery+css3飞机窗口动画特效</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="window">
	<div class="top"></div>
	<div class="glass">
		<div class="sky">
			<div class="cloud"></div>
			<div class="cloud"></div>
			<div class="cloud"></div>
			<div class="cloud"></div>
			<div class="cloud"></div>
			<div class="cloud"></div>
			<div class="nyan-cat"></div>
		</div>
	</div>
</div>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/style.js" type="text/javascript"></script>
</body>
</html>

JS代码(style.js):

$('.top').on('click',function(){
	$(this).toggleClass('closed');
}
);

CSS代码(style.css):

body{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100vh;background:silver;}
.window{position:relative;padding:20px;border:4px solid #808080;border-radius:48px;background-color:#D9D9D9;box-shadow:inset 0 0 80px rgba(0,0,0,0.2),0 0 0 40px whitesmoke,0 0 0 44px #808080,0 20px 40px 40px rgba(0,0,0,0.1);overflow:hidden;}
.window:before{content:"";position:absolute;top:-10px;left:0;width:100%;height:20px;background:black;opacity:0.2;-webkit-filter:blur(10px);filter:blur(10px);pointer-events:none;z-index:20;}
.top{position:absolute;left:0;top:-90%;width:100%;height:100%;border-radius:48px;background:whitesmoke;box-shadow:0 0 0 4px #808080,0 0 30px rgba(0,0,0,0.4);-webkit-transition:0.6s all ease-in-out;transition:0.6s all ease-in-out;cursor:pointer;z-index:10;}
.top.closed{top:-5%;}
.top:before{content:"";display:block;width:40%;height:8px;position:absolute;bottom:16px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);border-radius:4px;background-color:#808080;}
.top:after{content:"";display:block;width:16px;height:8px;position:absolute;bottom:16px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);border-radius:4px;background-image:-webkit-radial-gradient(#5df254,#15a10c);background-image:radial-gradient(#5df254,#15a10c);-webkit-animation-name:light;animation-name:light;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}
.glass{position:relative;width:200px;height:300px;border-radius:72px;box-shadow:0 0 0 4px #808080;overflow:hidden;}
.glass:after{content:"";width:100%;height:100%;position:absolute;top:0;left:0;background-image:-webkit-radial-gradient(circle farthest-corner at 90% 10%,rgba(255,255,255,0.4) 0%,rgba(0,0,0,0) 20%);background-image:radial-gradient(circle farthest-corner at 90% 10%,rgba(255,255,255,0.4) 0%,rgba(0,0,0,0) 20%);box-shadow:inset 0 0 60px rgba(0,0,0,0.2);border-radius:72px;}
.sky{position:relative;background:#3FA9F5;width:100%;height:100%;z-index:0;}
.nyan-cat{position:absolute;top:40%;width:90px;height:60px;background-image:url("../images/tenor.gif");background-size:contain;background-repeat:no-repeat;-webkit-animation-name:leftToRight;animation-name:leftToRight;-webkit-animation-duration:5s;animation-duration:5s;-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;z-index:-10;}
.cloud{position:relative;width:100px;height:40px;background-color:white;border-radius:40px;-webkit-animation-name:leftToRight;animation-name:leftToRight;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}
.cloud:before,.cloud:after{content:" ";width:40px;height:40px;border-radius:50%;background-color:white;position:absolute;}
.cloud:before{top:-20px;left:20px;}
.cloud:after{top:-10px;left:50px;}
.cloud:nth-child(1){-webkit-animation-duration:8s;animation-duration:8s;}
.cloud:nth-child(2){top:20%;-webkit-animation-delay:0.2s;animation-delay:0.2s;-webkit-animation-duration:6s;animation-duration:6s;}
.cloud:nth-child(3){top:40%;-webkit-animation-duration:4s;animation-duration:4s;}
.cloud:nth-child(4){top:60%;-webkit-animation-duration:6s;animation-duration:6s;}
.cloud:nth-child(5){top:20%;-webkit-transform:scale(3);transform:scale(3);-webkit-animation-duration:4s;animation-duration:4s;-webkit-animation-delay:2s;animation-delay:2s;}
.cloud:nth-child(6){top:20%;-webkit-transform:scale(2);transform:scale(2);-webkit-animation-duration:4s;animation-duration:4s;}
@-webkit-keyframes leftToRight{0%{left:-200%;}
100%{left:150%;}
}
@keyframes leftToRight{0%{left:-200%;}
100%{left:150%;}
}
@-webkit-keyframes light{0%{box-shadow:0 0 0px #5DF254;}
50%{box-shadow:0 0 20px #5DF254;}
80%{box-shadow:0 0 40px rgba(93,242,84,0);}
}
@keyframes light{0%{box-shadow:0 0 0px #5DF254;}
50%{box-shadow:0 0 20px #5DF254;}
80%{box-shadow:0 0 40px rgba(93,242,84,0);}
}

附件:下载该文件资源,减少时间成本(增值服务)