效果：

　　

源码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        *{

            margin: 0px;

            padding: 0;

        }

        .box{

            width: 240px;

            margin: 100px auto;

        }

        /*过度效果*/

        /*.qq{*/

            /*transition: all 1s;*/

        /*}*/

        /*.qq:hover{*/

            /*transform: rotate(360deg);*/

        /*}*/

        /*动画效果*/

        .qq:hover{

            animation: zhuan 0.1s linear infinite;

        }

        @-webkit-keyframes zhuan {

            from{

                transform: rotate(0);

            }to{

            transform: rotate(360deg);

                         }

        }

    </style>

</head>

<body>

    <div class="box">

        <img src="zhuan.jpg" alt="" class="qq">

    </div>

<script type="text/javascript">

</script>

</body>

</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. 2018.08.19 NOIP模拟 dp（二分+状压dp）

    Dp 题目背景 SOURCE:NOIP2015-SHY-10 题目描述 一块土地有 n 个连续的部分,用 H[1],H[2],-,H[n] 表示每个部分的最初高度.有 n 种泥土可用,他们都能覆盖连续 ...

  2. 2018.07.23 hdu5828 Rikka with Sequence（线段树）

    传送门 这道题维护区间加,区间开根,区间求和. 线段树常规操作. 首先回忆两道简单得多的线段树. 第一个:区间覆盖,区间加,区间求和. 第二个:区间开根,区间求和. 这两个是名副其实的常规操作. 但这 ...

  3. 使用yum命令报错File "/usr/bin/yum", line 30 except KeyboardInterrupt, e:

    背景: yum包的管理是使用python写的,有对应的python版本   遇到的问题报错如下: File "/usr/bin/yum", line 30     except K ...

  4. 电信网上营业厅-客户充值缴费时间段数据挖掘--spss

    最近研究分析了“云南电信网上营业厅”e9宽带续约缴费的数据,目前宽带续约量为171人,今天需要谈论的是:如何利用SPSS挖掘出“客户充值缴费的时间段”客户喜欢在哪个时间段来网厅进行充值缴费 云南电信网 ...

  5. html使用技巧

    line-height: 27px;  /* lineheight和height保持一致就能达到文本垂直居中*/ .top_content li { list-style-image: url(../ ...

  6. SSH整合 第三篇 Spring的加入

    1.思路和想法. 目前理解到的,觉得是的,可能的,应该这样的……………… Spring的两大核心是IoC和AOP Ioc:帮助实例化对象,加载到容器中,在注入到需要用到的地方.这样就可以减少在不同的方 ...

  7. （最小生成树）Agri-Net -- POJ -- 1258

    链接: http://poj.org/problem?id=1258 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82831#probl ...

  8. Codeforces801B Valued Keys 2017-04-19 00:21 136人阅读 评论(0) 收藏

    B. Valued Keys time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  9. maven 学习：为什么要使用maven，maven使用过程中的一些参数

    Maven是一个基于Java平台的项目构建工具. 设计的出发点: 在进行软件开发的过程中,无论什么项目,采用何种技术,使用何种编程语言,我们要重复相同的开发步骤:编码,编译,测试,生成文档,打包发布. ...

  10. 抱SQL SERVER大腿之我爱用视图(对大数据量的管理)

    我们拥有一个巨大的表,两千多万条记录.也许在行家眼里,两千多万条记录顶多算条毛,不过这条毛也忒粗壮了一点:我们的数据库占用的空间已经达到5G多了.不要以为是日志文件在搞鬼,日志文件可以自动收缩的,最多 ...