【CSS3】横屏引导小动画
主要知识点：
@media all and (orientation : landscape) { /* 这是匹配横屏的状态，横屏时的css代码 */}
@media all and (orientation : portrait){ /* 这是匹配竖屏的状态，竖屏时的css代码 */}
animation:
name( keyframe 名称)
duration (规定完成动画所花费的时间，以秒或毫秒计)
timing-function (规定动画的速度曲线)
delay (规定在动画开始之前的延迟)
iteration-count (规定动画应该播放的次数)
direction(规定是否应该轮流反向播放动画)
HTML
<!DOCTYPE html> <html lang="en"> <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.5s infinite 1.0s linear;
-webkit-transform:rotate(90deg);
animation:oReverse 2.5s infinite 1.0s linear;
transform:rotate(90deg);
}
@-webkit-keyframes oReverse{
0%{-webkit-transform:rotate(90deg);}
25%{-webkit-transform:translate(0);}
75%{-webkit-transform:translate(0);}
100%{-webkit-transform:translate(90deg);}
}
@keyframes oReverse{
0%{-webkit-transform:rotate(90deg);}
25%{-webkit-transform:translate(0);}
75%{-webkit-transform:translate(0);}
100%{-webkit-transform:translate(90deg);}
}
@media screen and (orientation:landscape){
/*横屏的时候*/
.oReverse{display:none!important}
}
