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 clip-path 用法介绍详解
Mar 01 HTML / CSS
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
CSS3结构性伪类选择器九种写法
Apr 18 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
Mar 20 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
使用phonegap获取位置信息的实现方法
Mar 31 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 21 HTML / CSS
css3 选择器
May 11 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下批量挂马和批量清马代码
2011/02/27 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
python中map的基本用法示例
2018/09/10 Python
Python socket处理client连接过程解析
2020/03/18 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
Python爬虫与反爬虫大战
2020/07/30 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
大雁塔导游词
2015/02/04 职场文书
红色革命电影观后感
2015/06/18 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL