点击这里体验效果：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. android studio和eclipse中如何获取sha1值

    首先如果是eclipse的话, 直接打开eclipse开发工具 那么接下来问题来了,现在很多开发者都已经从es转型到as开发工具了, 在android studio上没有直接提供这个GUI界面让我们去 ...

  2. Utility1：Overview

    Utility 是利用,使用的意思,utilization是指使用效率,利用率的意思. SQL Sever 内置 Utility Feature,便于集中监控Server关键资源(CPU和Disk)的 ...

  3. 开源WinForms界面开发框架Management Studio 选项卡文档 插件 Office 2007蓝色风格 后台线程

    Management Studio是我在WinForms小项目开发过程中搭建起来的一个插件式结构的应用程序框架,因为简单灵活又容易扩展,现在将它开源供读者参考. 跑起来的效果图如下所示,具备选项卡式多 ...

  4. nodejs 使用fs实现多级联动

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA0gAAAEdCAIAAAC5WdDhAAAgAElEQVR4nO3da3Mc153f8X4feq5lFR

  5. 前端学php之常量

    × 目录 [1]定义常量 [2]常量检测 [3]系统常量[4]魔术常量 前面的话 常量在javascript中并不存在,在php中却是与变量并列的重要内容.常量类似变量,但常量一旦被定义就无法更改或撤 ...

  6. MyEclipse 2014跟2015破解

    最近一直在弄后台开发,之前用idea感觉用的很不习惯,于是就换了myeclipse,两年多没有用myeclipse了,版本都很高了,记得我们之前用myeclipse8.5版本的时候,注册码什么的直接运 ...

  7. Target-Action回调模式

    前面的博客中提到过回调的概念,是在OC通过协议来实现的回调,和Java中的接口的回调极为相似,下面来介绍另一种方法回调模式: Target-Action回调.首先我们来从字面意思来理解一下Target ...

  8. Android随笔之——PackageManager详解

    参考:http://www.cnblogs.com/xingfuzzhd/p/3374504.html 今天要讲的是PackageManager.Android系统为我们提供了很多服务管理的类,包括A ...

  9. Linux异常表

    一.为什么需要异常表? 处于内核态的程序有下面四种情况会产生缺页异常: 1.内核试图访问属于进程地址空间的页,但是,该页对应的页框不存在或者内核试图去访问一个只读的页,分别对应“请求调页”和“写时复制 ...

  10. 程序员眼中的 SQL Server－非聚集索引能给我们带来什么？

    写在前面 最近在做的一个项目,页面访问的时候很慢(大概几秒钟的样子),然后用日志记录的方式,来排查这个问题,最后发现是 Entity Framework 初始化的一个坑(大概要花 6-7 秒),详见: ...