效果：

　　

源码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">
  7.         *{
  8.             margin: 0px;
  9.             padding: 0;
  10.         }
  11.         .box{
  12.             width: 240px;
  13.             margin: 100px auto;
  14.         }
  15.         /*过度效果*/
  16.         /*.qq{*/
  17.             /*transition: all 1s;*/
  18.         /*}*/
  19.         /*.qq:hover{*/
  20.             /*transform: rotate(360deg);*/
  21.         /*}*/
  22.         /*动画效果*/
  23.         .qq:hover{
  24.             animation: zhuan 0.1s linear infinite;
  25.         }
  26.         @-webkit-keyframes zhuan {
  27.             from{
  28.                 transform: rotate(0);
  29.             }to{
  30.             transform: rotate(360deg);
  31.                          }
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36.     <div class="box">
  37.         <img src="zhuan.jpg" alt="" class="qq">
  38.     </div>
  39. <script type="text/javascript">
  40.  
  41. </script>
  42. </body>
  43. </html>

图片：

2d旋转（css3实现过度效果和动画效果）的更多相关文章

  1. 实用CSS3的transform实现多种动画效果

    查看效果:http://keleyi.com/a/bjad/b6x9q8gs.htm 以下是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. ...

  2. 推荐9款使用CSS3实现的超酷动画效果

    大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...

  3. 解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果

    解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...

  4. html5+css3第一屏滚屏动画效果

    详细内容请点击 在线预览立即下载 html5+css3第一屏滚屏动画效果. 转载自:http://tympanus.net/codrops/2014/05/22/inspiration-for-art ...

  5. css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)

    源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...

  6. 基于canvas实现物理运动效果与动画效果(一)

    一.为什么要写这篇文章 某年某月某时某种原因,我在慕课网上看到了一个大神实现了关于小球的抛物线运动的代码,心中很是欣喜,故而写这篇文章来向这位大神致敬,同时也为了弥补自己在运动效果和动画效果制作方面的 ...

  7. [web前端] css3 transition属性实现3d动画效果

    cp from : https://www.cnblogs.com/chrxc/p/5123375.html transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动 ...

  8. css3 transition属性实现3d动画效果

    transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少, ...

  9. 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果

    摘要: 通过backface-visibility:hidden;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... ...

随机推荐

  1. 在windows7下创建ftp服务站点

    1.开始->控制面板->程序(点击“卸载程序”)->启动或关闭windows功能->Internet Information Services(Internet信息服务)-&g ...

  2. 20155320 2016-2017-2 《Java程序设计》第五周学习总结

    20155320 2016-2017-2 <Java程序设计>第五周学习总结 教材学习内容总结 错误处理 java中所有错误都会被打包为对象,可以通过try catch 代表错误的对象后做 ...

  3. Codeforces735B Urbanization 2016-12-13 11:58 114人阅读 评论(0) 收藏

    B. Urbanization time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  4. 重复 桂林电子科技大学第三届ACM程序设计竞赛

    题目链接:https://ac.nowcoder.com/acm/contest/558/B import java.util.HashSet; import java.util.Scanner; p ...

  5. eclipse中java build path下 allow output folders for source folders 无法勾选,该如何解决 eclipse中java build path下 allow output folders for source folders 无法勾选,

    在创建maven工程时,在设置output folders时,总是勾选以后,老是自动恢复到原来的状态,对比其他的maven的工程发现是在创建maven时候选择的项目为pom,而不是war或者jar,将 ...

  6. mac下能同时安装两个版本的xcode吗

    http://www.cocoachina.com/bbs/read.php?tid-288160-page-1.html

  7. 在MS单元测试中引发期望异常

    首先准备一个引发异常的方法. public static void ThrowException() { throw new ArgumentException(); } 然后在单元测试项目中,写下测 ...

  8. System.Windows.Freezable 在未被引用的程序集中定义

    System.Windows.Freezable 在未被引用的程序集中定义 解决方法 添加windowsbase.dll 引用

  9. zookeeper集群崩溃处理

    今天在私有化项目中遇到如下问题: 1.客户反馈用户登录返回303 2.登录服务器查看是大量的log将服务器磁盘空间占用殆尽,导致所有服务进程仍旧存在但是监听端口失败,服务不可用 3.清理日志文件 4. ...

  10. CentOS7布署.Net Core

    本文记录的所有东西,都是吸取别人的经验,自己实践得来,记录下来,也是为了某一天,用上的时候,能够更加的得心应手,平日的学习,都是未雨绸缪之举,但愿,这些笔记,也能帮上正在摸索的你. 第一步,下载虚拟机 ...