演示地址：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. LeetCode::Remove Duplicates from Sorted List II [具体分析]

    Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numb ...

  2. 高性能 Socket 组件 HP-Socket v3.2.1-RC4 公布

    HP-Socket 是一套通用的高性能 TCP/UDP Socket 组件,包括服务端组件.client组件和 Agent 组件,广泛适用于各种不同应用场景的 TCP/UDP 通信系统,提供 C/C+ ...

  3. 关于退运美国转基因玉米含有MRI 162转基因成分的质疑

    6月30日,新华社刊出文章"我国退运125.2万吨进口美国转基因玉米",读后有感. 文章说:国家质检总局办公厅副主任陆春明30日介绍,截至今年6月16日,全国出入境检验检疫机构共在 ...

  4. SURF特征

    了解了SIFT特征后,来学习SURF特征. 虽说是SIFT的一个变种,可是跟SIFT还是有差别的 差别有例如以下: 1.尺度空间的构建(近似)不同. 2.同意尺度空间多层图像同一时候被处理 3.特征点 ...

  5. 解决MacOS Terminal打开慢的问题

    用了Mac有一段时间了,突然发现Terminal打开奇慢,每次打开都显示logining...,打开大概要个五六秒的时间,以前打开都是瞬间打开的啊,这对于我们这种追求速度的程序员怎么受的了呢.开始一直 ...

  6. [c#]控制台进度条的示例

    看到[vb.net]控制台进度条的示例 感觉很好玩,翻译成C#版. using System; using System.Collections.Generic; using System.Linq; ...

  7. 使用DataSet数据集插入记录

    使用INSERT语句能够完成数据插入,使用DataSet对象也可以完成数据插入.为了将数据库的数据填充到DataSet中,则必须先使用DataAdapter对象的方法实现填充,当数据填充完成后,开发人 ...

  8. C#结构函数与base关键字

    //声明父类 class ProductsFather { public double Price { get; set; } public int Count { get; set; } publi ...

  9. struct可以拥有class般的构造函数

    struct A { int a, b; A(int x, int y) :a(x), b(y){} }; int main() { A a(1, 2); cout << a.a < ...

  10. 层次查询start with ... connect by

    如:select distinct dep_id from t_sys_dep_dimensions start with dep_id = (select dept_id from t_sys_pe ...