简单好玩的头像旋转功能

  • 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. 参考__JS

    教程 jQuery选择器总结 日期和时间 Bootstrap日期和时间表单组件 图表 morrisHighcharts 垂直滚动 fsvs 水平滚动 swiper 倒计时 countdownjs 全屏 ...

  2. springMVC+mybatis+spring整合案例

    1.web.xml a:配置spring监听,使web容器在启动时加载spring的applicationContext.xml <listener> <listener-class ...

  3. Maven 手动添加 JAR 包到本地仓库

    Maven 确确实实是个好东西,用来管理项目显得很方便,但是如果是通过 Maven 来远程下载 JAR 包的话,我宿舍的带宽是4兆的,4个人共用,有时候用 Maven 来远程下载 JAR 包会显得很慢 ...

  4. 冰球项目日志4-yjw

    小组讨论 我们组编程主要分成三个模块,各自负责自己的编程与测试. 杨静梧:确定击球算法编程.输入:冰球位置,速度大小方向:输出:撞击时冰球中心位置. 曹迦勒:确定击球手速度,位置.输入:撞击时冰球中心 ...

  5. ios回调函数的标准实现：protocol＋delegate

    一.项目结构

  6. Android N preview 试用

    一.下载更新包 下载地址:https://developer.android.com/intl/zh-cn/preview/download.html 注意下载适合你手机的安装包哦 二.把你手机的oe ...

  7. python虚拟环境

    sudo apt-get install python-virtualenv virtualenv --no-site-packages files cd files source ./bin/act ...

  8. JAVA GUI

    JAVA GUI中的事件处理:   委托事件模型:事件源对象和监听器对象具有绑定关系   一个监听器可以绑定多个事件源 一个事件源也可以绑定多个监听器 监听器有各自监听的事件类型   设置容器的布局管 ...

  9. 点击按钮div显示，点击div或者document，div隐藏

    $("button").click(function(event){ event.stopPropagation(); if($("div").is(':hid ...

  10. VPN安装后报错：Reason442 & Error56

    VPN安装后一直报错,同样的32位安装包别人安装是正常,自己安装就不正常了,考虑到是自己电脑配置的问题. 经过一番努力,解决了问题,下面就本次解决过程做一个小小的总结. (1)确保VPN Servic ...