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旋转的实现 >中做了 ...
随机推荐
- java中myeclipse连接mysql问题（java.lang.ClassNotFoundException: com.mysql.jdbc.Driver）
java中myeclipse连接mysql问题(java.lang.ClassNotFoundException: com.mysql.jdbc.Driver) 1.往项目中添加mysql-conne ...
- 对象排序，compareTo
第一个例子 /*为了比较,让自己的类实现Comparable接口,按照自己想要的排序方式重写compareTo *Map只是提供了对键的排序,但是当我们需要对值排序时就的提供我们自己的比较器 这里 只 ...
- VB用windows API激活子窗体
http://files.cnblogs.com/files/liuzhaoyzz/%E6%BF%80%E6%B4%BB%E5%AD%90%E7%AA%97%E4%BD%93.rar setforeg ...
- node.js基础 1之 HTTP事件回调进阶（HTTP模块）
HTTP概念进阶 1. 什么是回调? 回调是异步编程时的基础,将后续逻辑封装成起始函数的参数,逐层嵌套 2. 什么是同步/异步? 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯 ...
- c3p0连接池获得的Connection执行close方法后是否真的销毁Connection对象？
问题描述: jfinal做的api系统中,在正常调用接口一段时间后,突然再调用接口的时候,该请求无响应api系统后台也无错误信息 (就是刚开始接口调用是正常的,突然就无响应了) 于是啊,就开始找错误. ...
- ubuntu16.04安装jdk，tomcat
ubuntu16.04安装jdk,tomcat 最近装了一下tomcat,网上的教程很多,我也试了很多次,但是有一些教程关于tomcat配置是错误的,让我走上了歧途.差点重装系统,还好王总及时出手帮助 ...
- 第一个Asp.net小项目，主页写了下后台代码
一个比较完善的登录模块,就目前的知识范围来说应该算是完美的. 涉及到:cookies,Session,验证码等知识面 Cookies存放一组值: HttpCookie cook = new HttpC ...
- 网站过滤器Filter
实际上,Filter与Servlet及其相似,区别只是FIlter的doFilter()方法里多了一个FilterChain的参数,通过该参数可以控制是否放行用户的请求.网站有了过滤器十分的方便,可以 ...
- 关于CDN下查找网站真实ip
关于CDN下查找网站真实ip From t00ls.net -----雨苁收集 杂乱无章,自己慢慢看,有问题加Q2359795780~~~~~~噗 先来几张t00lslogo ...
- ECSHOP v2.7.3注入漏洞分析和修复
测试版本 漏洞条件 漏洞利用 产生原因 修复方案 1.测试版本 v2.7.3 RELEASE 20121106(最新) v2.7.3 RELEASE 20120411 2.漏洞条件 需登录到后台 3. ...