一款纯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实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
css3的过滤效果简单实例
Aug 03 HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
HTML5标签小集
Aug 02 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 HTML / CSS
Canvas如何做个雪花屏版404的实现
Sep 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.MVC的模板标签系统(四)
2006/09/05 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
解析php中heredoc的使用方法
2013/06/17 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
vue实现放大镜效果
2020/09/17 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
python使用tkinter实现简单计算器
2018/01/30 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
Python循环结构的应用场景详解
2019/07/11 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
《跨越百年的美丽》教学反思
2014/02/11 职场文书
教师考察材料范文
2014/06/03 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
python基础之模块的导入
2021/10/24 Python
详解TypeScript的基础类型
2022/02/18 Javascript