简单好玩的头像旋转功能

  • 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. 20161117__Z

    1.cclplus: error: unrecognized command line option "-std=gnu++11" http://www.gowhich.com/b ...

  2. php: 不能嵌套try-catch-fnally,否则执行时间过长

    php不能try-catch-fnally里面在嵌套try-catch-fnall,否则本来执行时间不长的程序,会被执行更长时间,这是php的bug吗? 如: try{ 代码块 }catch (\Ex ...

  3. Map的五种遍历方法

    package com.jackey.topic; import java.util.ArrayList;import java.util.HashMap;import java.util.Itera ...

  4. oracle笔记一

    一.Oracle简介 1.Oracle属于关系型数据库,是一款可以在Client/Server模式下运行的RDBMS产品.2009年,Oracle公司收购SUN. 2.Oracle是对象关系型数据库管 ...

  5. swift_属性观察者

    //: Playground - noun: a place where people can play import Cocoa var str = "Hello, playground& ...

  6. Centos下Yum安装PHP5.5,5.6,7.0

    默认的版本太低了,手动安装有一些麻烦,想采用Yum安装的可以使用下面的方案: 1.检查当前安装的PHP包 yum list installed | grep php 如果有安装的PHP包,先删除他们 ...

  7. html中给表格添加斜线

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. 关于offsetWidth,offsetHeight,offsetTop,offsetLeft和二维数组的声明

    offsetWidth,offsetHeight,offsetTop,offsetLeft 为只读状态,返回的值是int形式 只读形式即不能通过修改其值的大小. 想要修改某元素的这些值的大小(widt ...

  9. WordPress登陆页和后台面空白解决方法

    真没想到我居然也会碰到这么蛋疼的事情,有一天我登陆博客,输入账号密码之后登陆没有反应,之后我就试着用首页前台登陆(因为这个模板前台带登陆功能),之后成功登陆进入后台更新文章.我想算了.这小毛病就丢那吧 ...

  10. JavaScipt 数据交互

    标准的w3c直接提供了XMLHttpRequest方法,我们主要站在设计的角度来理解,如何设计出低耦合高内聚的代码jquery对Ajax的处理主要体现在对浏览器兼容,数据的处理过滤以及各种事件的封装上 ...