html5--6-56 阶段练习5-翻转效果

学习要点

  • 运用所学过的知识完成一个简单的小练习，理解对动画的应用。

 @charset="UTF-8";

 *{

     margin:;

     padding:;

 }

 img{

     width: 150px;

     height: 210px;

     border: 3px groove orange;

 }

 div{

     width: 150px;

     margin-left: auto;

     margin-right: auto;

     margin-top: 50px;

     animation: fz 6s infinite;

 }

 body{

         perspective: 500px;

 }

 @keyframes fz{

     0%{

         transform: rotateY(45deg);

     }

     20%{

         transform: rotateY(180deg);

     }

     40%{

         transform: rotateY(360deg);

     }

     60%{

         transform: rotateX(45deg);

     }

     80%{

         transform: rotateX(180deg);

     }

     90%{

         transform: rotateX(360deg);

     }

     100%{

         transform: rotateX(360deg);

     }

 }
 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>6-56课堂演示</title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <div>

             <img src="../img/sc17.png" alt="">

     </div>

 </body>

 </html>

html5--6-56 阶段练习5-翻转效果的更多相关文章

  1. CSS3+HTML5特效2 - 翻转效果

    先看效果,鼠标移上去看看. back front 1. 本实例需要以下元素 a. 容器BOX b. 默认显示元素FRONT c. 翻转显示元素BACK 2. 容器BOX的Height为200px,Wi ...

  2. jQuery 制作逼真的日历翻转效果的倒计时

    在开发中,一些功能需要用到倒计时,例如最常见的活动开始.结束的倒计时.使用最流行的 JavaScript 库来制作这个效果很简单.下面就是一个 jQuery 制作的逼真的日历翻转效果的倒计时功能. 在 ...

  3. 推荐12款实用的 JavaScript 书页翻转效果插件

    Flipbooks(书页)或者页面翻转已成为在网页设计中最流行的交互动画之一.他们可以用在 Flash,网页或者在线杂志中.使用书页动画或者页面翻转的网页设计效果方便人们展示他们的产品,作品或者其它内 ...

  4. 创意HTML5文字特效 类似翻页的效果

    原文:创意HTML5文字特效 类似翻页的效果 之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也 ...

  5. css3实现色子自动翻转效果

    原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...

  6. JavaScript 插件的书页翻转效果

    Flipbooks书页面翻转成为在网页设计中最流行的交互动画之中的一个. 他们能够用在 Flash,网页或者在线杂志中.使用书页动画或者页面翻转的网页设计效果展示他们的产品,更加直观有效. 结合 HT ...

  7. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  8. css3实现3D立体翻转效果

    1.在IE下无法显示翻转效果,火狐和谷歌可以 /*样式css*/ .nav-menu li { display: inline; } .nav-menu li a { color: #fff; dis ...

  9. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

  10. HTML5 Canvas 实现的9个 Loading 效果

    Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Load ...

随机推荐

  1. Flutter学习（一）——搭建开发环境（Windows）

    久闻 Flutter 大名,今天终于有时间体验一下了 ٩(๑>◡<๑)۶ 官网:https://flutter.dev/ 中文官网:https://flutterchina.club/ 一 ...

  2. 洛谷P1352 没有上司的舞会

    题目描述 某大学有N个职员,编号为1~N.他们之间有从属关系,也就是说他们的关系就像一棵以校长为根的树,父结点就是子结点的直接上司.现在有个周年庆宴会,宴会每邀请来一个职员都会增加一定的快乐指数Ri, ...

  3. 深入GCD（二）: 多核心的性能

    概念为了在单一进程中充分发挥多核的优势,我们有必要使用多线程技术(我们没必要去提多进程,这玩意儿和GCD没关系).在低层,GCD全局dispatch queue仅仅是工作线程池的抽象.这些队列中的Bl ...

  4. Android判断屏幕锁屏的方法总结

    由于做一个项目,需要判断屏幕是否锁屏,发现网上方法很多,但是比较杂,现在进行总结一下: 总共有两类方法: 一.代码直接判定 二.接收广播 现在先说第一类方法(代码直接判定): 1.通过PowerMan ...

  5. python 怎么启动一个外部命令程序， 并且不阻塞当前进程

    http://www.myexception.cn/perl-python/1278887.html http://blog.chinaunix.net/uid-25979788-id-3081912 ...

  6. Matlab中配置VLFeat

    在VLFeat官网上是这么介绍VLFeat的:VLFeat开源库实现了很多著名的机器视觉算法,如HOG, SIFT, MSER, k-means, hierarchical k-means, aggl ...

  7. Cocos2d-x JSB 自己主动绑定bindings

    Javascript Binding (简称JSB) 自己主动绑定教程. Cocos2d-x JSB 自己主动绑定bindings-generator (以下简称B-G) 使用心得 假设想弄清深入原理 ...

  8. $.ajax里一个中文全角逗号引发的惨案

    昨天,在制作一个页面时,突然发生一件不可思议的事情--JS失效了! 确实让人匪夷所思,我记得饭前还是正常运作的. 于是慢慢的缩小范围,把下午刚加的语句删掉,删完了页面就正常了. 于是被删除的这部分代码 ...

  9. C语言之基本算法34—分解质因数（方法一）

    //矩阵基础 /* ================================================================== 题目:输入一个正整数.将其分解为质因式,如:6 ...

  10. java开始到熟悉61

    本此主题:多维数组----矩阵运算 矩阵的运算规则是将对应位置的值进行运算,如上图所示. package array; public class Matrix { /** * 打印矩阵 * @para ...