一款纯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 相关文章推荐
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 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
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
php判断当前操作系统类型
2015/10/28 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
用javascript自动显示最后更新时间
2007/03/15 Javascript
javascript 对象比较实现代码
2009/04/27 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
Python多线程编程简单介绍
2015/04/13 Python
Python类的继承用法示例
2019/01/31 Python
Python3 批量扫描端口的例子
2019/07/25 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
会计出纳岗位职责
2013/12/25 职场文书
安全生产责任书范本
2014/04/15 职场文书
讲解员培训方案
2014/05/04 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
承诺书模板大全
2015/05/04 职场文书