演示地址：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. POJ 3356 AGTC(最小编辑距离)

    POJ 3356 AGTC(最小编辑距离) http://poj.org/problem?id=3356 题意: 给出两个字符串x 与 y,当中x的长度为n,y的长度为m,而且m>=n.然后y能 ...

  2. 一些使用Android设备调试功能的注意事项（挖职位）

    华为3C Activity切换动画过热. 当显示器是不是大图easy显现OOM(应用最大大于其他手机内容).因此,调试OOM不要当问题用这个手机,否则,很难发现问题. 小米3 不要调用系统的裁图功能. ...

  3. cocos2d-x v3.2 FlappyBird 各个类对象详细代码分析(7)

    今天我们介绍最后两个类 GameOverLayer类 GameLayer类 GameLayer类是整个游戏中最重要的类,由于是整个游戏的中央系统,控制着各个类(层)之间的交互,这个类中实现了猪脚小鸟和 ...

  4. 邮件协议（SMTP）性能测试总结（Foxmail邮箱）

    先介绍一下邮件协议SMTP的工作机制(连接和发送过程),用wireshark工具抓包进行分析,如下: SMTP协议的工作机制(连接和发送过程): 1.建立TCP连接,并将邮件服务器地址给客户端: 2. ...

  5. 设计模式（Java版）-创建型模式之简单工厂模式

    前言:这段时间在学习设计模式,本人也是小菜一枚(所以写的如果有错误的地方请大大们给予指出).这个东西也是我一直想学习的,从点点滴滴做起,记录下自己每天的领悟! 一.工厂模式的动机 在软件系统中,经常面 ...

  6. 关于driver_register做了些什么

    现在进入driver_register()函数去看看.在driver_register() 中,调用了driver_find(drv->name, drv->bus)函数,这里是干啥呢?这 ...

  7. linux file命令

    1. file 是检测文件类型的命令.2. 文件类型就文件组织的方式,通常不同的文件类型执行不同的标准.例如我们熟知的:txt , doc , xls , pdf ...3. file 命令的简单用法 ...

  8. C#。4 数组

    一.跳出循环的俩个关键字 1.break与continue.        这两个关键字一般放在循环的花括号里面使用.break——结束整个循环.continue——结束本次循环,进入下次循环. br ...

  9. ASP.Net动态创建GridView

    1.创建Field BoundField requestitem = new BoundField();//注意Field可以是ButtonField,TemplateField,...等等GridV ...

  10. ActiveReport 9手把手搭建环境及实战

    本文借鉴葡萄城空间产品,纯属分享,无任何营利目的 下载ActiveReports 9 专业版 打开下面的网站,点击立即下载,请您填写真实电子邮件地址,以获取ActiveReports产品试用版---系 ...