一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整


Posted in HTML / CSS onSeptember 02, 2014

之前已经为大家介绍了好几款css3按钮,今天要为大家介绍的是一款纯css3实现的圆形旋转分享按钮。旋转的角度可以自己调整。在demo中演示了三个角度旋转。360度,60度,-360度。如图:

一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整 

源码下载

看下实现代码:

html代码:

复制代码
代码如下:

<b>360 degree spin onMouseover and onMouseout</b></p>
<p id="socialicons">
<a href="http://www.w2bc.com/">
<img border="0" src="rss.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" src="delicious.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" src="facebook.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" src="twitter.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" src="yahoo.png" /></a>
</p>
<p>
<b>60 degree spin onMouseover and onMouseout</b></p>
<p id="socialicons2">
<a href="http://www.w2bc.com/">
<img border="0" src="rss.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" src="delicious.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" src="facebook.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" src="twitter.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" src="yahoo.png" /></a>
</p>
<p>
<b>-360 degree spin onMouseover ONLY</b></p>
<p id="socialicons3">
<a href="http://www.w2bc.com/">
<img border="0" src="rss.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" src="delicious.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" src="facebook.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" src="twitter.png" /></a> <a href="http://www.w2bc.com/">
<img border="0" src="yahoo.png" /></a>
</p>

css代码:

复制代码
代码如下:

p#socialicons img
{
/* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
p#socialicons img:hover
{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
p#socialicons2 img
{
/* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
p#socialicons2 img:hover
{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}
p#socialicons3 img
{
/* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}
p#socialicons3 img:hover
{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
HTML / CSS 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
css图标制作教程制作云图标
Jan 19 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
canvas简单连线动画的实现代码
Feb 04 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 HTML / CSS
CSS filter 有什么神奇用途
May 25 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 #HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 #HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 #HTML / CSS
css3中背景尺寸background-size详解
Sep 02 #HTML / CSS
css3中transition属性详解
Sep 02 #HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 #HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 #HTML / CSS
You might like
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
python里对list中的整数求平均并排序
2014/09/12 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
Python pymsql模块的使用
2020/09/07 Python
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
品质主管的岗位职责
2013/12/04 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
应届生面试求职信
2014/07/02 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers