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 相关文章推荐
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
html5表单及新增的改良元素详解
Jun 07 HTML / CSS
详解html5页面 rem 布局适配方法
Jan 12 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
Jul 02 HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 HTML / CSS
Html5 canvas画图白板踩坑
Jun 01 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中GET变量的使用
2006/10/09 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
jQuery技巧总结
2011/01/01 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
python sys.argv[]用法实例详解
2018/05/25 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
python的移位操作实现详解
2019/08/21 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
佳能英国官方网站:Canon UK
2017/08/08 全球购物
高山背包:High Sierra
2017/11/23 全球购物
大学生未来职业生涯规划书
2014/02/15 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
同学聚会祝酒词
2015/08/10 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle