【CSS 3】クロススクリーンガイドミニアニメーション

3364 ワード

【CSS3】横屏引导小动画_第1张图片
 
 
プレゼンテーションアドレス:http://codepen.io/anon/pen/oXbXdX
 
主な知識点:
 
 @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}
		}