使用css3给网页元素出场动画让页面动起来

Posted on by hackdl

使用css3给网页元素出场动画让页面动起来

一般情况下网页元素都是静态显示的，能不能做一个幻灯片那样增加个动画出场效果呢

这里使用css实现简单效果

css样式

test.css

*, *:after, *::before {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, fieldset, lengend, button, input, textarea, th, td {
	margin: 0;
	padding: 0;
   _background-image:url(about:blank);
   _background-attachment:fixed;
}


/* 设置默认字体 */ 
body, button, input, select, textarea {
	font-family: "微软雅黑","宋体","Arail";
	font-size: 14px;
    outline:none;
}
body{font-size:59.5%;}

/* 列表元素 */ 
ul,ol,li {
	list-style: none;
}

img {
	border: none;
    vertical-align: middle;
}

/* a标签 */ 
a {
	text-decoration: none ; 
    color:#000000 ;
}

a:hover {
	text-decoration: none ;
} 

.container {
    width: 1200px;
    min-width: 1200px;
    margin: 0 auto;
}



.clearfix:after, .clearfix:before {
	content:"";
	display:table
}
.clearfix:after {
	clear:both
}
.clearfix {
	zoom:1
}
.table{display: table;height: 100%}
.table-cell{display: table-cell;vertical-align: middle;}

.title {
	text-align: center
}
.title h3 {
	font-size: 4.2em;
	color: #000;
	margin-bottom: 15px
}
.title p {
	text-transform: uppercase;
	font-size: 1.8em;
	color: #0d6fb8
}
@media (max-width:1500px) {
.title h3 {
	font-size: 3.8em
}
}
@media (max-width:768px) {
.title h3 {
	font-size: 34px;
	margin-bottom: 10px
}
}
@media (max-width:500px) {
.title h3 {
	font-size: 28px;
	margin-bottom: 5px
}
.title p {
	font-size: 16px
}
}
@media (max-width:360px) {
.title h3 {
	font-size: 24px;
	margin-bottom: 5px
}
.title p {
	font-size: 14px
}
}

body, html {
	overflow: hidden;
	overflow-y: auto
}
div[class*=container], section[class*=container], ul[class*=container] {
	margin: 0 auto
}
@media (max-width:1240px) {
div[class*=container], section[class*=container], ul[class*=container] {
	min-width: 100%;
	width: 100%;
	max-width: 100%
}
}

.intro {
	/*padding: 65px 0 80px*/
	/*padding: 5px 0 60px*/
	padding: 5px 0 5px
}
.intro .title span {
	display: inline-block;
	font-size: 1.8em;
	margin-top: 15px;
	transition: color .4s;
	-ms-transition: color .4s;
	-o-tr服务器托管网ansition: color .4s;
	-webkit-transition: color .4s;
	-moz-transition: color .4s
}
.intro .title span:hover {
	color: #ec6c49
}
.intro-item {
	border-top: 1px solid #e6e6e6;
	border-left: 1px solid #e6e6e6;
	/*margin-top: 55px*/
	margin-top: 40px
}
.intro-list {
	text-align: center;
	border-right: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
	/*height: 270px;*/
	height: 100px;
	width: 33.33%;
	float: left;
	transition: box-shadow 1s;
	-ms-transition: box-shadow 1s;
	-o-transition: box-shadow 1s;
	-webkit-transition: box-shadow 1s;
	-moz-transition: box-shadow 1s
}
@media (max-width:500px) {
.intro-list {
	width: 50%
}
}

.intro-list:hover {
	box-shadow: 0 0 50px #cdcdcd
}
.intro-list:hover i {
	transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg)
}
.intro-list:nth-child(1) i {
	background: url(img/icon1.png) no-repeat center/contain
}
.intro-list:nth-child(2) i {
	background: url(img/icon2.png) no-repeat center/contain
}
.intro-list:nth-child(3) i {
	background: url(img/icon3.png) no-repeat center/contain
}
.intro-list:nth-child(4) i {
	background: url(img/icon4.png) no-repeat center/contain
}
.intro-list:nth-child(5) i {
	background: url(img/icon5.png) no-repeat center/contain
}
.intro-list:nth-child(6) i {
	background: url(img/icon6.png) no-repeat center/contain
}
.intro-list:nth-child(7) i {
	background: url(img/icon7.png) no-repeat center/contain
}
.intro-list:nth-child(8) i {
	background: url(img/icon8.png) no-repeat center/contain
}
.intro-list:nth-child(9) i {
	background: url(img/icon9.png) no-repeat center/contain
}
.intro-list i {
	display: inline-block;
	width: 41px;
	height: 41px;
	transition: transform 1.2s ease;
	-ms-transition: transform 1.2s ease;
	-o-transition: transform 1.2s ease;
	-webkit-transition: transform 1.2s ease;
	-moz-transition: transform 1.2s ease
}
.intro-list p {
	font-size: 2.2em;
	color: #1a1a1a;
	font-weight: bolder;
	margin: 25px 0 20px
}
.intro-list span {
	line-height: 24px;
	font-size: 1.4em;
	color: #999
}


/* 动画部分 */

.show_right {
    opacity: 0;
    transition: all ease 1s;
    -ms-transition: all ease 1s;
    -o-transition: all ease 1s;
    -webkit-transition: all ease 1s;
    -moz-transition: all ease 1s;
    transform: translateX(200px);
    -ms-transform: translateX(200px);
    -o-transform: translateX(200px);
    -webkit-transform: translateX(200px);
    -moz-transform: translateX(200px)
}

.show_right.scroll-watch-in-view {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0)
}

.show_left {
    opacity: 0;
    transition: all ease 1s;
    -ms-transition: all ease 1s;
    -o-transition: all ease 1s;
    -webkit-transition: all ease 1s;
    -moz-transition: all ease 1s;
    transform: translateX(-200px);
    -ms-transform: translateX(-200px);
    -o-transform: translateX(-200px);
    -webkit-transform: translateX(-200px);
    -moz-transform: translateX(-200px)
}

.show_left.scroll-watch-in-view {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0)
}
 

.show_bottom {
    opacity: 0;
    transition: transform cubic-bezier(.4,0,.2,1) 1.5s,opacity cubic-bezier(.4,0,.2,1) 1.5s;
    -ms-transition: transform cubic-bezier(.4,0,.2,1) 1.5s,opacity cubic-bezier(.4,0,.2,1) 1.5s;
    -o-transition: transform cubic-bezier(.4,0,.2,1) 1.5s,opacity cubic-bezier(.4,0,.2,1) 1.5s;
    -webkit-transition: transform cubic-bezier(.4,0,.2,1) 1.5s,opacity cubic-bezier(.4,0,.2,1) 1.5s;
    -moz-transition: transform cubic-bezier(.4,0,.2,1) 1.5s,opacity cubic-bezier(.4,0,.2,1) 1.5s;
    transform: translateY(60px);
    -ms-transform: translateY(60px);
    -o-transform: translateY(60px);
    -webkit-transform: translateY(60px);
    -moz-transform: translateY(60px)
}

.show_bottom.scroll-watch-in-view {
    opacity: 1;
    transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0)
}

.rotateY {
    opacity: 0;
    transform: rotateY(65deg) translateY(90px);
    -ms-transform: rotateY(65deg) translateY(90px);
    -o-transform: rotateY(65deg) translateY(90px);
    -webkit-transform: rotateY(65deg) translateY(90px);
    -moz-transform: rotateY(65deg) translateY(90px);
    transition: transform ease 1.6s,opacity ease 1s;
    -ms-transition: transform ease 1.6s,opacity ease 1s;
    -o-transition: transform ease 1.6s,opacity ease 1s;
    -webkit-transition: transform ease 1.6s,opacity ease 1s;
    -moz-transition: transform ease 1.6s,opacity ease 1s
}

.rotateY.scroll-watch-in-view {
    opacity: 1;
    transform: rotateY(1deg) translateY(0);
    -ms-transform: rotateY(1deg) translateY(0);
    -o-transform: rotateY(1deg) translateY(0);
    -webkit-transform: rotateY(1deg) translateY(0);
    -moz-transform: rotateY(1deg) translateY(0)
}

html

test.html



  
    
    
    页面动画
    
    
  
    
  
	

				

					
						
项目

					
					

				

				
				
    
					
  • 
						
    
						
    项目1
    
						
    
					
    • 
					
  • 
						
    
						
    项目2
    
						
    
					
    • 
					
  • 
						
    
						
    项目3
    
						
    
					
    • 
					
  • 
						
    
						
    项目4
    
						
    
					
    • 
					
  • 
						
    
						
    项目5
    
						
    
					
    • 
					
  • 
						
    
						
    项目6
    
						
    
					
    • 
					
  • 
						
    
						
    项目7
    
						
    
					
    • 
					
  • 
						
    
						
    项目8
    
						
    
					
    • 
					
  • 
						
    
						
    项目9
    
						
    
					
    • 
				

				
			

			
		 
			
				 
				
				
    
					
  • 
						
    
						
    项目1
    
						
    
					
    • 
					
  • 
						
    
						
    项目2
    
						
    
					
    • 
					
  • 
						
    
						
    项目3
    
						
    
					
    • 
				 
				

				
			

			
				
			
				 
				
    
					
  • 
						
    
						
    项目1
    
						
    
					
    • 
					
  • 
						
    
						
    项目2
    
						
    
					
    • 
					
  • 
						
    
						
    项目3
    
						
    
					
    • 
				 
				
				
			

			
				
				
				
     
		 $(function() {
			 var sw = new ScrollWatch({			 	 
				watchOffset: -50,				 	 
			 	onElementInView: function(data)服务器托管网 {
			 	  //
			 	}
			 });			 
		 })

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: spring之AOP的概念及简单案例

AOP概念 AOP（Aspect Oriented Programming），即面向切面编程，可以说是OOP（Object Oriented Programming，面向对象编程）的补充和完善。OOP引入封装、继承、多态等概念来建立一种对象层次结构，用于模拟公…

服务器托管，北京服务器托管，服务器租用，机房机柜带宽租用

服务器托管

咨询：董先生

电话13051898268 QQ/微信93663045！

上一篇:
下一篇: