一款纯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 相关文章推荐
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 HTML / CSS
CSS3 transition 实现通知消息轮播条
Oct 14 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 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读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
如何解决hover在ie6中的兼容性问题
2016/12/15 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
详解vue中async-await的使用误区
2018/12/05 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
python中最小二乘法详细讲解
2021/02/19 Python
后勤部经理岗位职责
2014/02/23 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python