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的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
May 12 HTML / CSS
CSS3实现多重边框的方法总结
May 31 HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
用HTML5制作数字时钟的教程
May 11 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 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堆栈与列队的学习
2013/06/21 PHP
深入解读php中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
javascript的几种写法总结
2016/09/30 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
python机器学习之神经网络(二)
2017/12/20 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
Python numpy数组转置与轴变换
2019/11/15 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
Python configparser模块应用过程解析
2020/08/14 Python
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
进修护士自我鉴定
2013/10/14 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
java解析XML详解
2021/07/09 Java/Android
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL
python内置模块之上下文管理contextlib
2022/06/14 Python