【CSS3】横屏引导小动画

浏览数：46 / 时间：2015年06月09日

技术分享

主要知识点：

@media all and (orientation : landscape) { /*　　这是匹配横屏的状态，横屏时的css代码　　*/}

@media all and (orientation : portrait){ /*　　这是匹配竖屏的状态，竖屏时的css代码　　*/}

animation:

name( keyframe 名称)
duration (规定完成动画所花费的时间，以秒或毫秒计)
timing-function (规定动画的速度曲线)
delay (规定在动画开始之前的延迟)
iteration-count (规定动画应该播放的次数)
direction(规定是否应该轮流反向播放动画)

HTML

<html>

<head>
	<meta charset="UTF-8">
　　　　　<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
　　　　　<meta content="yes" name="apple-mobile-web-app-capable">
　　　　　<meta content="black" name="apple-mobile-web-app-status-bar-style">
　　　　　<meta content="telephone=no" name="format-detection">
　　　　　<meta content="email=no" name="format-detection">
	<title>@keyframes Screen Rotation</title>
</head>
<body>
<div class="cubic">
	<img  class="oMove" src="http://note.youdao.com/yws/public/resource/5f8d8cc6e6722e4514141c815c87c1b8/803E63652A65490D8B80D1A4AAD902AC">
	<p>横屏观看，体验更佳</p>
</div>
	
</body>


</html>

CSS

	body{
		background-color: #000000;
		color:#fff;
		font-size: 13px;
	}

	.cubic{
		width: 200px;
		height: 200px;
		position: absolute;
    　　　　　　　top: 0;
    　　　　　　　right:0;
    　　　　　　　bottom: 0;
    　　　　　　　left: 0;  
   　　　　　　　 margin:auto;
    　　　　　　　text-align: center;
	}
    
    .oMove{
    	/*animation: 
    	name( keyframe 名称) 
    	duration (规定完成动画所花费的时间，以秒或毫秒计)
    	timing-function (规定动画的速度曲线)
    	delay (规定在动画开始之前的延迟)
    	iteration-count (规定动画应该播放的次数)
    	direction(规定是否应该轮流反向播放动画)
    	*/
    	-webkit-animation:oReverse 2.6s infinite 1.0s linear;
    	-webkit-transform:rotate(90deg);
    	animation:reverse 2.6s infinite 1.0s linear;
    	transform:rotate(90deg);
    }

@-webkit-keyframes oReverse{
　　　　0%{-webkit-transform:rotate(90deg);}
　　　　25%{-webkit-transform:translate(0);}
　　　　50%{-webkit-transform:translate(0);}
　　　　100%{-webkit-transform:translate(90deg);}
}
@keyframes oReverse{
　　　　0%{-webkit-transform:rotate(90deg);}
　　　　25%{-webkit-transform:translate(0);}
　　　　50%{-webkit-transform:translate(0);}
　　　　100%{-webkit-transform:translate(90deg);}
}
@media screen and (orientation:landscape){
 /*横屏的时候，动画消失*/
　　　　.cubic{display:none!important}
}

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

【CSS3】横屏引导小动画