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中新增的样式使用示例附效果图
Aug 19 HTML / CSS
CSS3+js实现简单的时钟特效
Mar 18 HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
May 02 HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 HTML / CSS
使用Canvas操作像素的方法
Jun 14 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 HTML / CSS
css3应用示例:新增的选择器
Mar 16 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 操作文件的一些FAQ总结
2009/02/12 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
php制作动态随机验证码
2015/02/12 PHP
php实现的简单日志写入函数
2015/03/31 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
从0开始学Vue
2016/10/27 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
VSCode下好用的Python插件及配置
2018/04/06 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
python实现图片压缩代码实例
2019/08/12 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
python实现复制文件到指定目录
2019/10/16 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
python游戏开发的五个案例分享
2020/03/09 Python
python实现代码审查自动回复消息
2021/02/01 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
教师自荐信范文
2013/12/09 职场文书
单位作风建设自查报告
2014/10/23 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
地道战观后感300字
2015/06/04 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
索尼ICF-36收音机评测
2022/04/30 无线电