windows8开机CSS3动画特效代码,Css代码库,德仔网

代码语言
代码分类
【Css】 windows8开机CSS3动画特效
作者:阿紫 / 发布于2014/12/13/ 627

	body{
	 margin: 0;
	 padding: 0;
	 background-color: #90da15;
	}
	.wrapp{
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 width: 600px;
	 height: 300px;
	 margin: -150px 0 0 -300px;
	 -webkit-perspective: 30px;
	 -webkit-transform: translateX(0px);
	 -webkit-animation: wrapp 400ms 800ms ease-in forwards;
	
	 -moz-perspective: 30px;
	 -moz-transform: translateX(0px);
	 -moz-animation: wrapp 400ms 800ms ease-in forwards;
	
	 -ms-perspective: 30px;
	 -ms-transform: translateX(0px);
	 -ms-animation: wrapp 400ms 800ms ease-in forwards;
	
	 perspective: 30px;
	 transform: translateX(0px);
	 animation: wrapp 400ms 800ms ease-in forwards;
	}
	.text{
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 width: 0px;
	 height: 60px;
	 margin: -30px 0 0 -160px;
	 overflow: hidden;
	 -webkit-transform: translateX(0px);
	 -webkit-animation: text 400ms 800ms linear forwards;
	
	 -moz-transform: translateX(0px);
	 -moz-animation: text 400ms 800ms linear forwards;
	
	 -ms-transform: translateX(0px);
	 -ms-animation: text 400ms 800ms linear forwards;
	
	 transform: translateX(0px);
	 animation: text 400ms 800ms linear forwards;
	}
	h1{
	 float: right;
	 font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
	 font-weight: normal;
	 color: #fff;
	 padding: 0;
	 margin: 0;
	 width: 320px;
	 height: 60px;
	 font-size: 60px;
	 line-height: 60px;
	}
	.logo{
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 width: 90px;
	 height: 90px;
	 margin: -45px 0 0 -45px;
	 background-color: #fff;
	 -webkit-transform: translateX(0px) rotateY(10deg);
	 -webkit-animation: logo 500ms 300ms ease-out forwards;
	
	 -moz-transform: translateX(0px) rotateY(10deg);
	 -moz-animation: logo 500ms 300ms ease-out forwards;
	
	 -ms-transform: translateX(0px) rotateY(10deg);
	 -ms-animation: logo 500ms 300ms ease-out forwards;
	
	 transform: translateX(0px) rotateY(10deg);
	 animation: logo 500ms 300ms ease-out forwards;
	}
	.logo .top-left{
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 44px;
	 height: 44px;
	 border-right: solid 2px #90da15;
	 border-bottom: solid 2px #90da15;
	}
	.logo .bottom-right{
	 position: absolute;
	 bottom: 0;
	 right: 0;
	 width: 44px;
	 height: 44px;
	 border-left: solid 2px #90da15;
	 border-top: solid 2px #90da15;
	}
	
	@-webkit-keyframes logo {
	 from {
	 -webkit-transform: translateX(0px) rotateY(10deg);
	 }
	 to {
	 -webkit-transform: translateX(0px) rotateY(-10deg);
	 }
	}
	@-webkit-keyframes text {
	 from {
	 width: 0px;
	 -webkit-transform: translateX(0px);
	 }
	 60%{
	 width: 0px;
	 }
	 to {
	 width: 320px;
	 -webkit-transform: translateX(240px);
	 }
	}
	@-webkit-keyframes wrapp {
	 from {
	 -webkit-transform: translateX(0px);
	 }
	 to {
	 -webkit-transform: translateX(-200px);
	 }
	}
	@-moz-keyframes logo {
	 from {
	 -moz-transform: translateX(0px) rotateY(10deg);
	 }
	 to {
	 -moz-transform: translateX(0px) rotateY(-10deg);
	 }
	}
	@-moz-keyframes text {
	 from {
	 width: 0px;
	 -moz-transform: translateX(0px);
	 }
	 60%{
	 width: 0px;
	 }
	 to {
	 width: 320px;
	 -moz-transform: translateX(240px);
	 }
	}
	@-moz-keyframes wrapp {
	 from {
	 -moz-transform: translateX(0px);
	 }
	 to {
	 -moz-transform: translateX(-200px);
	 }
	}
	
	@-ms-keyframes logo {
	 from {
	 -ms-transform: translateX(0px) rotateY(10deg);
	 }
	 to {
	 -ms-transform: translateX(0px) rotateY(-10deg);
	 }
	}
	/* www.datouwang.com */
	@-ms-keyframes text {
	 from {
	 width: 0px;
	 -ms-transform: translateX(0px);
	 }
	 60%{
	 width: 0px;
	 }
	 to {
	 width: 320px;
	 -ms-transform: translateX(240px);
	 }
	}
	@-ms-keyframes wrapp {
	 from {
	 -ms-transform: translateX(0px);
	 }
	 to {
	 -ms-transform: translateX(-200px);
	 }
	}
	@keyframes logo {
	 from {
	 transform: translateX(0px) rotateY(10deg);
	 }
	 to {
	 transform: translateX(0px) rotateY(-10deg);
	 }
	}
	@keyframes text {
	 from {
	 width: 0px;
	 transform: translateX(0px);
	 }
	 60%{
	 width: 0px;
	 }
	 to {
	 width: 320px;
	 transform: translateX(240px);
	 }
	}
	@keyframes wrapp {
	 from {
	 transform: translateX(0px);
	 }
	 to {
	 transform: translateX(-200px);
	 }
	}
试试其它关键字
　CSS3　　动画特效　
同语言下
可能有用的
阿紫贡献的其它代码(4)