简单好玩的头像旋转功能

  • html结构
<body>

	<img src="https://a-ssl.duitang.com/uploads/item/201604/29/20160429003937_5YxXV.thumb.700_0.jpeg" alt="banben01">

</body>
  • css样式
<style>

    img{

	display: block;

	margin:100px auto;

	width: 160px;

	height: 160px;

	border-radius: 50%;

	border:6px solid #C0C0C0;

        transition:all 500ms;

	};

    img:hover{

	transform:rotate(320deg);

	};

</style>
  • 最终实现效果 逼王镇楼 (๑•ᴗ•๑)

Σ( ° △ °|||)︴ 弱鸡还不会录屏做GIF动图,懒得找啦!!

css3实现头像旋转功能(超easy!!!)的更多相关文章

  1. css3实现头像旋转360度

    css样式: .div a img{ width: 88px; height: 88px; border-radius: 88px; transition: all 1.2s ease-out 0s; ...

  2. css3通过scale()实现放大功能、通过rotate()实现旋转功能

    css3通过scale()实现放大功能.通过rotate()实现旋转功能,下面有个示例,大家可以参考下 通过scale()实现放大功能 通过rotate()实现旋转功能 而transition则可设置 ...

  3. CSS3中的动画功能（一）

    css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...

  4. 用JQuery仿造QQ头像裁剪功能

    最近工作真心忙碌,几乎没时间写博客.今天趁周末来仿一个QQ头像裁剪功能插件.效果如下: 所有文件都可在我的Github上下载,从头到尾从简到繁按步骤一共分了9个HTML文件,每个步骤文件里的注释都写的 ...

  5. 用CSS3制作的旋转六面体动画

    这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back

  6. 纯CSS3悬停图标旋转导航动画代码

    分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="x_con ...

  7. 一款基于jquery和css3的头像恶搞特效

    今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 在线预览   源码下载 实现的代 ...

  8. 第102天：CSS3实现立方体旋转

    CSS3实现立方体旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  9. WPF中使用AxisAngleRotation3D实现CAD的2D旋转功能

    原文:WPF中使用AxisAngleRotation3D实现CAD的2D旋转功能       对于CAD图形来说,3D旋转比较常用,具体实现方法在上篇文章<WPF中3D旋转的实现 >中做了 ...

随机推荐

  1. JavaScript中的防篡改对象

    由于JavaScript共享的特性,任何对象都可以被放在同一环境下运行的代码修改. 例如: var person = {name:"caibin'} person.age = 21; 即使第 ...

  2. TCP/IP协议学习(七) 基于C# Socket的Web服务器---动态通讯实现

    目录 (1).基于Ajax的前端实现 (2).Web服务器后端处理 一个完整的web服务器,不仅需要满足用户端对于图片.文档等资源的需求:还能够对于用户端的动态请求,返回指定程序生成的数据.支持动态请 ...

  3. 【转】PCI学习笔记

    1.PCI设备编号    每一个PCI device都有其unique PFA(PCI Fcntion Address)    PFA由 bus number.device number.functi ...

  4. css学习笔记 5

    将css引入到html页面中的方法: 用style属性设置样式 用<style>标签设置样式 用<link>标签引入外部样式文件 用@import引入外部样式文件 <li ...

  5. mongodb语法备份（转）

    mongodb语法 MongoDB的好处挺多的,比如多列索引,查询时可以用一些统计函数,支持多条件查询,但是目前多表查询是不支持的,可以想办法通过数据冗余来解决多表查询的问题. 查询colls所有数据 ...

  6. 张艾迪（创始人）：Be.Time+Cr.Idear的创新理念

    The World No.1 Girl :Eidyzhang The World No.1 Internet Girl :Eidyzhang AOOOiA.global Founder :Eidyzh ...

  7. jquery笔记之属性选择器 查找以某种条件开头的页面元素

    jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...

  8. ionic 初入门

    ionic ionic 是webapp开发的一个框架 安装 npm install -g cordova ionic ;  我这两个分开装,因为ionic模块拖不下来,所以只好等待时机.这时候科学上网 ...

  9. datagrid 禁止点击行

    var s = $("#dg").datagrid('getPanel');            var rows = s.find('tr.datagrid-row');   ...

  10. [转载]SQL Server如何保证可空字段中非空值唯一

    原文地址:http://www.cnblogs.com/caspnet/archive/2011/02/23/1962638.html 解决问题是:在一个表里面,有一个允许为空的字段,空是可以重复的, ...