效果：

　　

源码：

<!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. jquery ajax请求方式与提示用户正在处理请稍等

    为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示.我们可通过设置$.ajax()下的参数beforeSend()来实现 初次使用$.ajax() ,我没有去区分过ajax的异步 ...

  2. 2018.10.22 cogs2471. [EZOI 2016]源氏的数学课（线段树）

    传送门 线段树入门操作. 直接把题目给的(r−i+1)∗a[i](r-i+1)*a[i](r−i+1)∗a[i]拆开变成(r+1)∗1∗a[i]−i∗a[i](r+1)*1*a[i]-i*a[i](r ...

  3. 2018.09.30 bzoj3551:Peaks加强版（dfs序+主席树+倍增+kruskal重构树）

    传送门 一道考察比较全面的题. 这道题又用到了熟悉的kruskal+倍增来查找询问区间的方法. 查到询问的子树之后就可以用dfs序+主席树统计答案了. 代码: #include<bits/std ...

  4. 《C++ Primer （V4）》读书笔记

    第2章 变量和基本类型 1.(P56)如果使用class关键字来定义类,那么定义在第一个访问标号前的任何成员都隐式指定为private:如果使用struct关键字,那么这些成员都是public. 第7 ...

  5. cmake-add_definitions

    add_definitions: Adds -D define flags to the compilation of source files. add_definitions(-DFOO -DBA ...

  6. 10.N个整数中查找是否相加为K[深度搜索]

    /*摘自书本,这种算法很绕!*/ #include <iostream> using namespace std; ,,,}; ; bool dfs(int i,int sum) { if ...

  7. 20145209 2016-2017-2 《Java程序设计》第6周学习总结

    20145209 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 4.1 Y86指令集体系结构 •有8个程序寄存器:%eax.%ecx.%edx.%ebx.% ...

  8. 基于MATLAB的中值滤波算法实现

    在实时图像采集中,不可避免的会引入噪声,尤其是干扰噪声和椒盐噪声,噪声的存在严重影响边缘检测的效果,中值滤波是一种基于排序统计理论的非线性平滑计数,能有效平滑噪声,且能有效保护图像的边缘信息,所以被广 ...

  9. [ACM_数据结构] 线段树模板

    #include<iostream> #include<cmath> using namespace std; #define maxn 200005 class Node{ ...

  10. Team Foundation Server 开发流程管理管理研讨会

    这周,和微软公司的朋友一起,受北京某金融企业邀请,为企业软件部门一个70多人的软件团队提供了一场基于Team Foundation Server的软件软件流程的技术研讨会.在研讨会中,培训基于微软Te ...