简单好玩的头像旋转功能

  • 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. Redis中的客户端redis-cli 命令总结

    1.连接操作相关的命令quit:关闭连接(connection)auth:简单密码认证 2.对value操作的命令exists(key):确认一个key是否存在del(key):删除一个keytype ...

  2. Android View 简析

    基于android 4.4上源码分析: setContentView流程: getwindow() ->setContentView() -> installDecor() -> a ...

  3. nvmw安装，用于控制node版本;

    之前一直使用的是node v2.2.0版本,挺说新版本的node解决了npm安装插件产生文件夹结构过深的问题,所以就想更新试试: 上网一看才发现,尼玛的node已经到了6.+版本了,好吧,看来还是得跟 ...

  4. js数组倒叙输出

    第一种:是直接利用代码进行输出 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  5. Python 小练习

    输出标题以及长度 结果 输出网页下方学校地理位置以及 输出"abcdefg"base64编码 输出网页内容的MD5 hash

  6. HTML 或 CSS 文件中引用的图片文件移动到任意位置

    对于一个套接字的输入操作,第一步通常涉及等待数据从网络到达,当所等待分组到达时,被复制到内核的某个缓冲区: 第二步就是把数据从内核缓冲区复制到应用进程缓冲区.通过 Session 的 createQu ...

  7. ActionBar compat 如何禁用ActionBar的显示/隐藏动画

    ActionBar compat 如何关闭ActionBar的显示隐藏动画 @Override public boolean onCreateOptionsMenu(Menu menu) { //消除 ...

  8. 269. Alien Dictionary 另类字典 *HARD*

    There is a new alien language which uses the latin alphabet. However, the order among letters are un ...

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

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

  10. Codeforces Round #372 (Div. 2) C. Plus and Square Root

    题目链接 分析:这题都过了2000了,应该很简单..写这篇只是为了凑篇数= = 假设在第级的时候开方过后的数为,是第级的系数.那么 - 显然,最小的情况应该就是, 化简一下公式,在的情况下应该是,注意 ...