用css3实现简单的进入效果

最新推荐文章于 2024-07-28 20:04:07 发布

lurensang

最新推荐文章于 2024-07-28 20:04:07 发布

阅读量5.5k

点赞数 2

分类专栏：前端文章标签： css3 进入效果

本文链接：https://blog.csdn.net/sangjinchao/article/details/68930975

版权

前端专栏收录该内容

6 篇文章 2 订阅

订阅专栏

这是一个比较简单的小例子，实现如图效果

仅仅用css3就可以达到这种效果，代码如下：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<style type="text/css">
	.div {
		position: relative;
		top: 20px;
		height: 300px;
		width: 200px;
		margin: 0 auto;
		background: blue;
		float: left;
		margin-left: 20px;
	}
	.div2 {
		position: relative;
		top: 30px;
		height: 300px;
		width: 200px;
		margin: 0 auto;
		background: red;
		float: left;
		margin-left: 20px;
	}
	.fadeInLeft {
		animation: fadeInLeft;
	}
	.fadeInDown {
	    animation: fadeInDown;
	}
	.fadeInUp {
	    animation: fadeInUp;
	}
	.fadeInRight {
		animation: fadeInRight;
	}
	.OneAnimated {
	    animation-duration: 0.5s;
	    animation-fill-mode: both;
	}
	.TwoAnimated {
	    animation-duration: 1s;
	    animation-fill-mode: both;
	}
	.ThreeAnimated {
	    animation-duration: 1.5s;
	    animation-fill-mode: both;
	}
	.FourAnimated {
	    animation-duration: 2s;
	    animation-fill-mode: both;
	}
	@keyframes fadeInDown{
		0% {
		    opacity: 0;
		    transform: translateY(-50px);
		}
		100% {
		    opacity: 1;
		    transform: translateY(0);
		}
	}
	@keyframes fadeInLeft{
		0% {
		    opacity: 0;
		    transform: translateX(-50px);
		}
		100% {
		    opacity: 1;
		    transform: translateX(0);
		}
	}
	@keyframes fadeInUp{
		0% {
		    opacity: 0;
		    transform: translateY(50px);
		}
		100% {
		    opacity: 1;
		    transform: translateY(0);
		}
	}
	@keyframes fadeInRight{
		0% {
		    opacity: 0;
		    transform: translateX(50px);
		}
		100% {
		    opacity: 1;
		    transform: translateX(0);
		}
	}
</style>
<body>
</body>
<div style="width:100%;height:332px;position: relative;">
	<div class="div fadeInRight OneAnimated">
		
	</div>
	<div class="div fadeInRight TwoAnimated">
		
	</div>
	<div class="div fadeInRight ThreeAnimated">
		
	</div>
	<div class="div fadeInRight FourAnimated">
		
	</div>
</div>
<div class="div2 fadeInRight TwoAnimated">
	
</div>
<div class="div2 fadeInUp TwoAnimated">
	
</div>
<div class="div2 fadeInDown TwoAnimated">
	
</div>
<div class="div2 fadeInLeft TwoAnimated">
	
</div>
</html>

就这样~