演示地址：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}

		}

　　

　　

【CSS3】横屏引导小动画的更多相关文章

  1. 一款html5和css3实现的小机器人走路动画

    之前介绍了好多款html5和css3实现的动画,今天要给大家带来一款html5和css3实现的小机器人走路动画.该实例的人物用html5绘画的,动画效果是html5和css3实现的.一起看下效果图. ...

  2. css3中的制作动画小总结

    系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...

  3. CSS3——制作人物走路的小动画

    一个很简单的小动画,但是还挺有意思的,就是找这种图片很麻烦,我这里把我找的一张图片贴上来,这张图片是我在网上找的,又改了背景色和大小. <!DOCTYPE html> <html l ...

  4. css3实现循环执行动画，且动画每次都有延迟

    一.最终效果 需求:gift图片的小动画每隔2s执行一次. 需求就一句话,我们看一下实现过程. 二.实现过程 1.网页结构 <!DOCTYPE html> <html lang=&q ...

  5. css3中变形与动画（三）

    transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...

  6. CSS3-实现单选框radio的小动画

    在微信上看到一个教程文,觉得制作的小动画还是很有意思的,自己也试验了一下.一开始动画怎么都不执行(我用的HB),因为内置浏览器对css3的不兼容.加上各种浏览器前缀后就好了.但是旋转那个效果,在HB里 ...

  7. 2014圣诞节一款纯css3实现的雪人动画特效

    在2014年的圣诞节,爱编程小编给大家分分享一款纯css3实现的雪人动画特效.该实例实现一个雪人跳动的特效,效果图如下: 在线预览   源码下载 实现的代码. html代码: <span cla ...

  8. CSS3全览_动画+滤镜

    CSS3全览_动画+滤镜 目录 CSS3全览_动画+滤镜 1. 列表和生成的内容 2. 变形 3. 过渡 4. 动画 5. 滤镜, 混合, 裁剪和遮罩 6. 针对特定媒体的样式 作者: https:/ ...

  9. CSS3鼠标滑过动画线条边框特效

    基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...

随机推荐

  1. @IBDesignable和@IBInspectable

    近期一直在看苹果公司提供的两本swift官方教程电子书,一部是<The Swift Programming Language>,还有一部是<Using Swift With Coco ...

  2. gcc和g++编译c或者c++文件碰到的问题

    gcc和g++都是GNU(组织)的一个编译器.        误区一:gcc只能编译c代码,g++只能编译c++代码      两者都可以,但是请注意:      1.后缀为.c的,gcc把它当作是C ...

  3. JavaScript异步编程 ( 一 )

    1. 异步编程 Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只能完成一件任务.如果有多个任务,就必须 ...

  4. Eclipse,hadoop2.7.2 hadoop-eclipse-plugin.jar的制作

    装好了hadoop后发现有装个eclipse的必要,于是参照文章A(http://www.powerxing.com/hadoop-build-project-using-eclipse/)进行安装, ...

  5. python 下的数据结构与算法---1：让一切从无关开始

    这段时间把<Data Structure and Algorithms with python>以及<Problem Solving with  Algorithms and Dat ...

  6. ADB命令与monkey

    adb devices查看已连接的设备 adb install package.apk adb shell monkey 1000 随机操作1000次当次操作可能会 adb无法使用,提示error: ...

  7. Java Se 基础系列(笔记) -- OO

    记录所学到的关于Java Se的一些基础知识 1.对象是通过“属性(成员变量)”和“方法”来分别对应事物所具有的静态属性和动态属性 2.类(Class)是对某一类事物的抽象,对象(Object)为某个 ...

  8. zoj 3755

    状态压缩dp 扫雷 n×M格子奇数行有雷,给出偶数行的数字,求最少有多少个雷. 刚开始觉得状压状态不知道怎么办,因为每行能影响的范围太广,后来展昭说横着来,然后几分钟就a了. 这件事请告诉我们看问题要 ...

  9. uva 498 - Polly the Polynomial

    UVa 498: Polly the Polynomial | MathBlog #include <cstdio> #include <cstdlib> using name ...

  10. [GIT] warning: LF will be replaced by CRLF问题解决方法

    原文链接[http://michael-roshen.iteye.com/blog/1328142] 开发环境: 操作系统: windows xp ruby 1.9.2 rails 3.1.3 git ...