演示地址：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. [Javascript] Intro to Recursion - Detecting an Infinite Loop

    When using recursion, you must be mindful of the dreaded infinite loop. Using the recursive function ...

  2. IntelliJ IDEA 的Project structure说明

    IntelliJ IDEA 的Project structure可以在File->Project structure中打开,同时,在新建项目是IDE一般用向导的方式让你填写Project str ...

  3. 大数据笔记09：大数据之Hadoop的HDFS使用

    1. HDFS使用: HDFS内部中提供了Shell接口,所以我们可以以命令行的形式操作HDFS

  4. C#自定义List类

    代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; namespac ...

  5. Drawable与Bitmap 自定义

    Drawable简介 Drawable是Android平下通用的图形对象,它可以装载常用格式的图像,比如GIF.PNG.JPG,当然也支持BMP.相比于View,我们并不需要去考虑如何measure. ...

  6. 知问前端--Ajax

    本节课主要是创建一个问题表,将提问数据通过 ajax 方式提交出去.然后对内容显示进行布局,实现内容部分隐藏和完整显示的功能. 一．Ajax 提问创建一个数据表:question,分别建立:id.ti ...

  7. .NET程序集签名

    强命名程序集的一个好处是防篡改.假如我有一个程序集MyDll.dll,如果我用我自己的私钥进行签名将程序集中的内容进行哈希处理,其他人如果不知道我的私钥的话,就不能篡改我的这个程序集进行某些恶意的行为 ...

  8. MVC 4.0项目部署在IIS上无法浏览的解决方案

    本文属于原创,转载请标明出处! MVC 4.0发布后部署到IIS上可能出现无法浏览的问题,浏览器报403的错误. 解决方法是:只需在web.config配置文件里的<system.webServ ...

  9. SQL Server 2005无法远程连接的解决方法

    以前一直连接本地的数据库,连接SQL Server 2005是小菜的... 做项目也是老师搭好了服务器端,打上IP去访问就行...也不用考虑太多. 今天自己在公司搭SQL Server 2005服务器 ...

  10. poi实现Excel导出

    最近做了一个导出Excel的小功能,以前没接触过,现在分享下自己的代码,想让各位帮忙看看有啥地方可以优化,也方便自己以后查阅... 首先是excelAction的代码: /** * excelActi ...