【CSS3】横屏引导小动画
主要知识点：
@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】横屏引导小动画的更多相关文章
- 一款html5和css3实现的小机器人走路动画
之前介绍了好多款html5和css3实现的动画,今天要给大家带来一款html5和css3实现的小机器人走路动画.该实例的人物用html5绘画的,动画效果是html5和css3实现的.一起看下效果图. ...
- css3中的制作动画小总结
系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...
- CSS3——制作人物走路的小动画
一个很简单的小动画,但是还挺有意思的,就是找这种图片很麻烦,我这里把我找的一张图片贴上来,这张图片是我在网上找的,又改了背景色和大小. <!DOCTYPE html> <html l ...
- css3实现循环执行动画，且动画每次都有延迟
一.最终效果 需求:gift图片的小动画每隔2s执行一次. 需求就一句话,我们看一下实现过程. 二.实现过程 1.网页结构 <!DOCTYPE html> <html lang=&q ...
- css3中变形与动画（三）
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
- CSS3-实现单选框radio的小动画
在微信上看到一个教程文,觉得制作的小动画还是很有意思的,自己也试验了一下.一开始动画怎么都不执行(我用的HB),因为内置浏览器对css3的不兼容.加上各种浏览器前缀后就好了.但是旋转那个效果,在HB里 ...
- 2014圣诞节一款纯css3实现的雪人动画特效
在2014年的圣诞节,爱编程小编给大家分分享一款纯css3实现的雪人动画特效.该实例实现一个雪人跳动的特效,效果图如下: 在线预览 源码下载 实现的代码. html代码: <span cla ...
- CSS3全览_动画+滤镜
CSS3全览_动画+滤镜 目录 CSS3全览_动画+滤镜 1. 列表和生成的内容 2. 变形 3. 过渡 4. 动画 5. 滤镜, 混合, 裁剪和遮罩 6. 针对特定媒体的样式 作者: https:/ ...
- CSS3鼠标滑过动画线条边框特效
基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...
随机推荐
- [React] React Router: Route Parameters
A router library is no good if we have to hardcode every single route in our application. In this le ...
- Linux - Eclipse CDT + GCC 安装(2014.10.2)
Eclipse CDT + GCC 安装 (2014.10.2) 本文地址:http://blog.csdn.net/caroline_wendy 1. 安装Eclipse,在官方站点下载Eclips ...
- R语言——包的添加和使用
R是开源的软件工具,很多R语言用户和爱好者都会扩展R的功能模块,我们把这些模块称为包.我们可以通过下载安装这些已经写好的包来完成我们需要的任务工作. 包下载地址:https://cran.r-proj ...
- this——笔记
this是执行上下文中的一个属性.this与上下文中可执行代码的类型有直接关系,this值在进入上下文时确定,并且在上下文运行期间永久不变. 在这里一切都简单.在全局代码中,this始终是全局对象本身 ...
- htm初学笔记
一.什么是html HTML(HyperText Markup Language):超文本标记语言,一种纯文本类型的语言 --使用带有尖括号的“标记”将网页中的内容逐一标识出来 用来设计网页的标记语言 ...
- DataSet ，DataTable，DataRow 之间的关系与使用
关系 DataSet 包含多个DataTable,DataTable包含多行DataRow. 使用情况: 有时候GridView等控件需要将数据源动态绑定到DataSet中:将多个DataSe ...
- NHibernate+NUnit (VS2012+SQL Server2008) (转)
源博客:http://blog.csdn.net/jiajiayouba/article/details/9877875 首先,你要明白,NHibernate在.NET中的作用和Hibernate在J ...
- JS 函数参数
1.简单的无参函数调用 function Test1(Func) { Func(); } function Test2() { alert("我要被作为函数参数啦!"); } // ...
- Sicily 1323. Switch text
题目地址:1323. Switch text 思路: 题目意思不好理解呀. 题目意思是这样的:输入两个测试数据,首先,两个测试数据本身得各自前后倒转,然后两个测试数据倒转后的结果再各自对半互换,然后测 ...
- .net转php laraval框架学习系列（四） 项目实战---View
laravel的参考文档中view的讲解有些简单. 在实际项目开发中view的灵活性其实是非常大. 首先来看看laravel中的布局页 和asp.net mvc中有什么不同 <!DOCTYPE ...