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 相关文章推荐
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
CSS的pointer-events属性详细介绍(作用和注意事项)
Apr 23 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
Aug 13 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 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&amp;&amp;mysql)五
2006/10/09 PHP
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
Python中Numpy mat的使用详解
2019/05/24 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
PYTHON绘制雷达图代码实例
2019/10/15 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
python 读取数据库并绘图的实例
2019/12/03 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
实习推荐信格式模板
2015/03/27 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
导游词之南京中山陵
2019/11/27 职场文书
一文解答什么是MySQL的回表
2022/08/05 MySQL