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小游戏贪吃蛇
package snake; import java.awt.BorderLayout;import java.awt.Canvas;import java.awt.Color;import java ...
- 浅谈python中得import xxx，from xxx import xxx， from xxx import *
在python中import跟from import都是用来导入的,但是导入的机制不同 1.import xxx:导入模块,或者文件夹,对于调用模块或者文件夹中子模块的变量或者函数,需要使用" ...
- Python unittest appium
import unittest from appium import webdriver from appium.common.exceptions import NoSuchContextExcep ...
- JS学习之事件流
本文是原创文章,如需转载,请注明文章出处 JS和AS师出同源,所以事件流的3个阶段也跟AS一样,分别是捕获阶段,目标阶段,冒泡阶段. 下面写了个例子可以清晰的看出事件流的顺序: eventTest.h ...
- yii2-basic后台管理功能开发之三：自定义GridView列显示
在第二篇 yii2-basic后台管理功能开发之二:创建CRUD增删改查 中,我们利用gii工具生成的结果一般并不是我们想要的结果. 我们需要根据自己的需求自定义列显示.我遇到的主要是一下变更: 时间 ...
- Callable与Future的介绍
http://www.cnblogs.com/whgw/archive/2011/09/28/2194760.html
- linux系统文件说明
linux系统文件说明 bin 系统命令目录 dev 设备目录 home 用户的家(每个系统用户在home下都有一个自己家) root超级用户在根目录下 lib 系统库目录.so动态库文件 media ...
- 通过图片对比带给你不一样的KMP算法体验
KMP 算法,俗称“看毛片”算法,是字符串匹配中的很强大的一个算法,不过,对于初学者来说,要弄懂它确实不易. 笔者认为,KMP 算法之所以难懂,很大一部分原因是很多实现的方法在一些细节的差异.体现在几 ...
- 《精通C#》第十三章 对象的生命周期
在C#中,程序员无法直接在C#中删除一个托管对象,因为C#不提供这个功能,那么类的实例就需要通过CLR调用垃圾回收机制进行清除,回收内存..NET垃圾回收器会压缩空的内存块来实现优化,为了辅助这一功能 ...
- 10.6 CCPC northeast
1001 Minimum's Revenge 点的编号从 1 到 n ,u v 的边权是 LCM(u,v) ,求这个图的最下生成树 搞成一颗以 1 为 根 的菊花树 ---------------- ...