一款纯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实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
CSS3——齿轮转动关键代码
May 02 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
Jan 11 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
Oct 19 HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 HTML / CSS
详解CSS玩转图片Base64编码
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之第四天
2006/10/09 PHP
php 代码优化的42条建议 推荐
2009/09/25 PHP
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python中的一些类型转换函数小结
2013/02/10 Python
介绍Python中的文档测试模块
2015/04/28 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
采购内勤岗位职责
2013/12/10 职场文书
商务助理求职信范文
2014/04/20 职场文书
清洁工个人工作总结
2015/03/05 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
Android中的Launch Mode详情
2022/06/05 Java/Android
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers