点击这里体验效果：http://keleyi.com/a/bjad/tfxpf3p5.htm

请使用支持CSS3的浏览器查看。请把光标放到图片上,然后再移到图片外，注意效果。 原图 大图

以下是源代码：

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

 <meta charset="utf-8">

 <title>足球宝贝来了，任你旋转(CSS3)-柯乐义</title><base target="_blank" />

 <style>

 body {

 background:#ddd;

 }

 .keleyi {

 width: 220px;

 height: 220px;

 margin: 0 auto;

 background: no-repeat url("http://keleyi.com/image/a/q5l1xnmf.jpg") left top;

 -webkit-background-size: 220px 220px;

 -moz-background-size: 220px 220px;

 background-size: 220px 220px;

 -webkit-border-radius: 110px;

 border-radius: 110px;

 -webkit-transition: -webkit-transform 2s ease-out;

 -moz-transition: -moz-transform 2s ease-out;

 -o-transition: -o-transform 2s ease-out;

 -ms-transition: -ms-transform 2s ease-out;

 }

 .keleyi:hover {

 -webkit-transform: rotateZ(360deg);

 -moz-transform: rotateZ(360deg);

 -o-transform: rotateZ(360deg);

 -ms-transform: rotateZ(360deg);

 transform: rotateZ(360deg);

 }

 </style>

 </head>

 <body>

 <div class="keleyi"><a href="http://keleyi.com">柯乐义</a>

 <br />

 keleyi.com

 </div>

 <div>请使用支持CSS3的浏览器查看本页。请把光标放到图片上,然后再移到图片外，注意效果。

 <br />

 <a href="http://keleyi.com/a/bjad/tfxpf3p5.htm">原文</a>

 <a href="http://keleyi.com/image/a/q5l1xnmf.jpg">原图</a> <a href="http://keleyi.com/image/a/d1eycfl3.jpg" target="_blank">大图</a>

 </div>

 </body>

 </html>

例子中用到了CSS3 transform 属性，请参考：http://keleyi.com/a/bjad/m03g9742.htm

web前端资源：http://www.cnblogs.com/jihua/p/webfront.html

最后放上大图，现在巴西世界杯进行中，选了一张足球宝贝，你觉得怎样：

足球宝贝来了，任你旋转(CSS3)的更多相关文章

  1. css3动画由浅入深总结

    阅读目录 一:过渡动画---Transitions 二:Animations功能 三:translate(tx,ty) 四:scale(x,y) 五:rotate(x): 5.1:skew(x,y): ...

  2. CSS3新特性罗列

    接触CSS3这么久了,总是到要用的时候直接拿来用,却没有好好地总结归纳一下,那就在这里好好梳理一下吧. CSS3边框: 圆角边框: 关键:border-radius <!DOCTYPE html ...

  3. Web前端资源汇总

    本文地址:http://www.cnblogs.com/jihua/p/webfront.html 网页特效库 2017新年快乐特效 CSS3+jQuery实现时钟插件 Html5入门实例" ...

  4. 前端面试题整理（css）

    1.介绍所知道的CSS hack技巧(如:_, *, +, \9, !important 之类). CSS hack的原理: 由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优 ...

  5. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  6. 【CSS3动画】transform对文字及图片的旋转、缩放、倾斜和移动

    前言:之前我有写过CSS3的transform这一这特性,对于它的用法,还不是很透彻,今天补充补充,呵呵 你懂的,小司机准备开车了. a)再提一提transform的四个属性 ①旋转--->ro ...

  7. CSS3鼠标滑过图标放大以及旋转

    本人是HTML5-CSS3初学者,这次分享一款纯CSS3实现的图片动画,当鼠标滑过小图标时,图标会放大,同时图标会出现旋转的动画效果.我们在很多个性化个人博客中经常看到鼠标滑过人物头像后头像图片旋转就 ...

  8. css3+jquery制作3d旋转相册

    首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准 ...

  9. 纯css3 3D图片立方体旋转动画特效

    纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...

随机推荐

  1. java轻量级IOC框架Guice

    Google-Guice入门介绍(较为清晰的说明了流程):http://blog.csdn.net/derekjiang/article/details/7231490 使用Guice,需要添加第三方 ...

  2. javascript的canvas绘图的基本用法

    <canvas>是HTML里面非常强大的元素,利用它结合js可以实现很多动画效果,大大增强交互性.下面,我想用图文并茂的方式阐述一下canvas的绘图机制的基础内容,话不多说,先上代码: ...

  3. ASP.NET Core的配置（4）：多样性的配置来源[下篇]

    我们在上篇和中篇对配置模型中默认提供的各种ConfigurationProvider进行了深入详尽的介绍,如果它们依然不能满足项目中的配置需求,我们可以还可以通过自定义ConfigurationPro ...

  4. 【实时】DevExpress内存监视

    前言 在做项目的时候,我们有时候需要检测项目的内存占用情况,有时候是检测内存泄露~,有时候是查看某段代码执行前后的内存对比,以方便找出问题并以解决. 内存泄漏也称作“存储渗漏”,用动态存储分配函数动态 ...

  5. 安装nginx

    [yum安装nginx] yum clean all(这步不执行会出现no more mirrors to try错误) cd /etc/yum.repos.d/ vi nginx.repo 填写 [ ...

  6. .NET 中Barcode Library的应用二

    .NET中Barcode Library的应用二 介绍 在上一篇中我已经简单介绍了这个函数库(条形码应用之一------------函数库的简介).在这一篇中我将使用这个库提供更多的操作,希望对大家有 ...

  7. Yahoo军规

    一.尽可能的减少HTTP请求 每一个图片,文字,js文件,css文件都是一个请求. 可以通过合并来请求来减少HTTP请求 比如:图片为一个请求,js文件为一个请求,css为一个请求 二.使用CDN C ...

  8. Fragment基础----信息传递

    如何通过activity来访问fragment的信息呢,我们可以通过一个实例来了解. 使用两个Fragment和一个activity管理 效果图: 第一个fragment来表示输入框 第二个fragm ...

  9. GitHub托管BootStrap资源汇总（持续更新中…）

    Twitter BootStrap已经火过大江南北,对于无法依赖美工的程序员来说,这一成熟前卫的前端框架简直就一神器,轻轻松松地实现出专业的UI效果.GitHub上相关的的开源项目更是层出不穷,在此整 ...

  10. CSS魔法堂：重拾Border之——解构Border

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...