【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/ ...
随机推荐
- SqlServer 笔记
问题一:这标红色的符号 取掉 一直没有见过标红色的符号,尝试把这些符号粘贴出来到 notepad 发现它是乱码,尝试将它粘贴到sql查询分析器里,发现它显示空白.对于这种数据,一直想着找到这个acsi ...
- [Falcor] Return the data from server
<!-- index.html --> <html> <head> <!-- Do _not_ rely on this URL in production. ...
- 一个C++基于boost简单实现的线程池
xl_blocking_queue.h ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...
- SQLServer中跨库复制数据
SQLServer中把某个表里的记录复制到另一个数据库的表中的操作方法. 场景 现有数据库a和数据库b,数据库a里有表table1,数据库b里有表table2.现在要把表table1里的记录复制到ta ...
- OD: Big_Endian vs Little_Endian
经调试,Windows 下为 Little_Endian,OD 中堆栈数据区的 (dword)0xAABB0102,0x02 存储在低地址,0x01 存储在高地址. 内容来自:http://blog. ...
- python 下的数据结构与算法---5：递归（Recursion）
定义:递归就是不断分割整体成部分直到可以轻易解决分割出来的部分. 递归表达式三定律: 1:递归表达式必须有个最小单元 (最小单元既是停止递归调用以及能够直接运算的) 2:递归表达式在运算过程中 ...
- 使用VS Code开发Angular 2应用程序所需配置文件的解析
目录 package.json typings.json tsconfig.json launch.json settings.json tasks.json package.json: 这是项目的基 ...
- JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
1. JSON.parse(jsonString): 在一个字符串中解析出JSON对象 var str = '[{"href":"baidu.com",&quo ...
- eclipse安装ADT插件重启后不显示Android SDK Manager和Android Virtual Device Manager图标的一种解决办法
通常安装,搭建安卓环境后,不显示Android SDK Manager和Android Virtual Device Manager ize解决方法:Eclipse ->window->c ...
- jquery easyui+layer后台框架
最近使用jquery easyui搭建了一个后台框架,以方便以后使用 上图先: 下载地址:CSDN下载