演示地址：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. Mina入门实例

    继续上一篇,这篇主要讲通过mina往B端发送消息.并接受消息,mina是一个网络通信框架,封装了javaNIO.简单易用.网上有非常多关于他的介绍,在此不赘述了. 如上篇所介绍,完毕功能,须要五个类: ...

  2. mysql 建立加密连接

    加密连接可提高数据的安全性,但会降低性能.要进行加密连接,必须满足以下要求: user权限表里要有相关的SSL数据列.如果安装的MySQL服务器是4.0.0版的,user权限表已包含相关的SSL数据列 ...

  3. IIS7的安装详解

    IIS7安装流程规范 1,   IIS常用的功能模块介绍: 1)         静态内容:可发布静态 Web 文件格式,比如 HTML 页面和图像文件. 2)         默认文档:允许您配置当 ...

  4. 自定义ViewGroup 流式布局

    使用 public class MainActivity extends Activity {     @Override     protected void onCreate(Bundle sav ...

  5. hibernate连接数据库，进行操作的步骤

    //初始化 Configuration conf=null; SessionFactory sf=null; Session session=null; Transaction tx=null; tr ...

  6. WPF样式和资源2

    <Window.Resources> <FontFamily x:key="ButtonFontFamily">Time New Roman</Fon ...

  7. sublime3配置及插件安装

    1.下载https://github.com/wbond/sublime_package_control中的zip文件,解压后将文件夹名更改为Package Control. 2.将1中的文件夹放入s ...

  8. MySQL 忘记密码后的重置操作

    一.修改配置文件方式        1.关闭 MySQL                 linux:                        1)service mysqld stop     ...

  9. js文本框失去焦点事件与按钮单击事件的冲突问题

    <input type="text" id="txt" name="txt"/> <input type="bu ...

  10. C语言基础学习基本数据类型-变量的输出与输入

    变量的输出 变量如何输入输出呢?实际上,在这之前你已经使用过输出语句(printf语句)了,我们可以使用printf来执行输出. printf语句的使用方法如下: printf(格式控制字符串, 数据 ...