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系列之3D制作方法案例
Aug 14 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
CSS伪类与CSS伪元素的区别及由来具体说明
Dec 07 HTML / CSS
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 HTML / CSS
html5 自定义播放器核心代码
Dec 20 HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 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
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
PHP递归的三种常用方式
2019/02/28 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
python flask搭建web应用教程
2019/11/19 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
用 python 进行微信好友信息分析
2020/11/28 Python
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
数据库笔试题
2013/05/09 面试题
幼儿教师自我鉴定
2013/11/02 职场文书
私人委托书格式
2014/09/10 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书