CSS3实现头像旋转效果


Posted in HTML / CSS onMarch 13, 2017

鼠标未放上效果:

CSS3实现头像旋转效果

鼠标放上之后旋转效果:

CSS3实现头像旋转效果

transition: all 2.0s;表示所有的属性变换在2秒内完成;

transform: rotate(360deg);表示图片旋转360度。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            img{
                border: #000 solid 2px;
                display: block;
                margin: 50px auto;
                border-radius: 50%;
                transition: all 2.0s;
            }
            img:hover{
                transform: rotate(360deg);
            }
        </style>
    </head>
    <body>
        <img src="img/03.jpg" />
    </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3盒子模型详解
Apr 24 HTML / CSS
CSS3网格的三个新特性详解
Apr 04 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 #HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 #HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 #HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 #HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 #HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 #HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 #HTML / CSS
You might like
php设计模式 Composite (组合模式)
2011/06/26 PHP
php实现rc4加密算法代码
2012/04/25 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
10个实用的脚本代码工具
2010/05/04 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
详解Python的Django框架中的模版继承
2015/07/16 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
用Python实现随机森林算法的示例
2017/08/24 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
关于python 跨域处理方式详解
2020/03/28 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
大学生职业生涯规划书模版
2013/12/30 职场文书
市场营销职业生涯规划书范文
2014/01/12 职场文书
幼师中班个人总结
2015/02/12 职场文书
500字小学生检讨书
2015/02/19 职场文书
大学生暑期实践报告
2015/07/13 职场文书
董事长开业致辞
2015/07/29 职场文书
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
Vue的生命周期一起来看看
2022/02/24 Vue.js
Nginx利用Logrotate实现日志分割
2022/05/20 Servers