点击这里体验效果：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. iOS开发-应用崩溃日志揭秘（一）

    作为一名应用开发者,你是否有过如下经历? 为确保你的应用正确无误,在将其提交到应用商店之前,你必定进行了大量的测试工作.它在你的设备上也运行得很好,但是,上了应用商店后,还是有用户抱怨会闪退 ! 如果 ...

  2. CATransition转场动画

    背景: 最近在温习动画,分享个简单系统的转场动画 viewcontroller *VC=[self.storyboard instantiateViewControllerWithIdentifier ...

  3. MacOS中使用QT开发iOS应用

    因为项目合同中规定一部分业务内容要在手机端实现,包括安卓机和苹果机,因此选择了QT作为开发工具.程序在Win10和安卓系统上已经完美运行,这几天开始搭建iOS的编译和发布环境,因为以前没有使用过mac ...

  4. webpack + vuejs 基本配置（一）

    开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...

  5. 解密jQuery内核 DOM操作

    jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...

  6. .NET平台开源项目速览(10)FluentValidation验证组件深入使用(二)

    在上一篇文章:.NET平台开源项目速览(6)FluentValidation验证组件介绍与入门(一) 中,给大家初步介绍了一下FluentValidation验证组件的使用情况.文章从构建间的验证器开 ...

  7. vc下打印透明背景图片

    一.前言 刚接到个任务,要把带有透明背景的章子图片打印出来,开始觉得不是很简单吗,直接用vc自动生成的打印功能不就ok了.不过问题却不是想像的那么简单! 二.窗口中显示透明图片 在窗口中显示图片,可以 ...

  8. SYSTEM表空间AUD$使用空间过大问题处理

    问题现象:SYSTEM表空间使用率超99%,前期设计时SYSTEM表空间是10G固定大小不允许自动扩展. 1.查询SYSTEM表空间的使用率 set linesize 200 col TABLESPA ...

  9. 彻底解决低端安卓手机touchend事件不触发（考虑scroll）

    本次移动端开发时遇见了安卓4.2系统不能触发touchend的问题,有以下需求. 1. 横滑轮播图 2.下拉刷新页面内容 3.body滚动条不能失效 开始在轮播图touchmove事件中阻止了浏览器默 ...

  10. 在Mac下运行ASP.NET Core应用程序

    在Mac下运行ASP.NET Core应用程序 通过参照.NET Core相关官方文档,在我的Mac电脑上用Visual Studio Code创建了我的第一个ASP.NET应用. 开发环境搭建 首先 ...