css3实现头像旋转功能(超easy!!!)
简单好玩的头像旋转功能
- 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!!!)的更多相关文章
- css3实现头像旋转360度
css样式: .div a img{ width: 88px; height: 88px; border-radius: 88px; transition: all 1.2s ease-out 0s; ...
- css3通过scale()实现放大功能、通过rotate()实现旋转功能
css3通过scale()实现放大功能.通过rotate()实现旋转功能,下面有个示例,大家可以参考下 通过scale()实现放大功能 通过rotate()实现旋转功能 而transition则可设置 ...
- CSS3中的动画功能（一）
css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...
- 用JQuery仿造QQ头像裁剪功能
最近工作真心忙碌,几乎没时间写博客.今天趁周末来仿一个QQ头像裁剪功能插件.效果如下: 所有文件都可在我的Github上下载,从头到尾从简到繁按步骤一共分了9个HTML文件,每个步骤文件里的注释都写的 ...
- 用CSS3制作的旋转六面体动画
这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back
- 纯CSS3悬停图标旋转导航动画代码
分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="x_con ...
- 一款基于jquery和css3的头像恶搞特效
今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 在线预览 源码下载 实现的代 ...
- 第102天：CSS3实现立方体旋转
CSS3实现立方体旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- WPF中使用AxisAngleRotation3D实现CAD的2D旋转功能
原文:WPF中使用AxisAngleRotation3D实现CAD的2D旋转功能 对于CAD图形来说,3D旋转比较常用,具体实现方法在上篇文章<WPF中3D旋转的实现 >中做了 ...
随机推荐
- 01 ~ 03 headfirst php & mysql
Question : 难道不是所有web页面原先都放在服务器上吗? 甚至存储在.html文件中的HTML页面? Answer : 没错, 网站的所有文件都存储在服务器上, html, css, php ...
- 远程连接redis
1.在ubuntu上的redis作为服务端,默认是打开的 在redis的配置文件redis.conf中,找到bind localhost注释掉. 注释掉本机,局域网内的所有计算机都能访问. bind ...
- struts2值栈内部数据结构详解
值栈是struts2内部一片很重要的区域,我在初学的时候,发现对于值栈这个数据结构的理解不是很深刻.例如OGNLContext是什么,ActionContext和值栈有什么关系.为什么ActionCo ...
- javascript学习内容--改变样式、取消设置、显示内容、隐藏内容
<head> <style> body{font-size:12px;} #txt{ height:400px; width:600px; border:#333 solid ...
- [重要公告] 关于禁止发布Windows系统及非法激活软件的通知
Skyfree 发表于 2013-11-15 09:45:17 https://www.itsk.com/thread-306891-1-1.html 接微软方面法务通知,要求删除涉及发布Win8/8 ...
- LogConfigruration
import java.io.FileNotFoundException; import java.io.FileReader; import java.io.IOException; import ...
- 红包demo
嘿嘿,红包demo import random dic={} lis=['KeLan','MonKey','Dexter','Superman','Iron Man','Robin'] def red ...
- Apache Commons Chain
http://commons.apache.org/proper/commons-chain/ http://commons.apache.org/proper/commons-chain/cookb ...
- php 使用curl模拟登录discuz以及模拟发帖
<?php$discuz_url = 'http://127.0.0.1/discuz/';//论坛地址$login_url = $discuz_url .'logging.php?action ...
- Z表数据EXCEL导入
很多项目都有这种需求,虽然别人用的各有不同,不过闲来无事,还是自己搞了一个出来.基于EXCEL的导入. *&------------------------------------------ ...