css3 旋转按钮 使用CSS3创建一个旋转可变色按钮


Posted in HTML / CSS onDecember 31, 2012

想把访客引到另一个页面?添加一个很炫的按钮是个很好的办法 !今天的文章提出了如何使用CSS3创建一个旋转,旋转,可变色按钮。
这是一个演示旋转的CSS3按钮。让我们先从HTML:

复制代码
代码如下:

<div>
<a class="button">旋转按钮</a>
</div>

和现在的CSS:
复制代码
代码如下:

.button
{
background:#aaa;
color:#555;
font-weight:bold;
font-size:15px;
padding:10px 15px;
border:none;
margin:50px;
cursor:pointer;
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
-o-transition-property:width,height,-o-transform,background,font-size,opacity,color;
-o-transition-duration:1s,1s,1s,1s,1s,1s,1s;
-moz-transition-property:width, height, -moz-transform, background, font-size, opacity, color;
-moz-transition-duration:1s,1s,1s,1s,1s,1s,1s;
transition-property:width,height,transform,background,font-size,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;
-webkit-border-radius:5px;
border-radius:5px;
box-shadow:0 0 2px rgba(0,0,0,0.5);
text-shadow:0 0 5px rgba(255,255,255,0.5);
display:inline-block; /*它是重要为按钮旋转*/
}

这里的关键代码转换属性,它可以定义通过宽度、高度、背景、颜色、透明度等。在这个例子中,属性是改变每一秒,根据过渡时间属性。
transition: opacity 2s ease-out, background 1s linear, width 1s, height 1s, font-size 1s;
接下来,使用这段代码来触发纺丝效果通过盘旋元素;
复制代码
代码如下:

.button:hover
{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
background:#99A411;
font-size:30px;
color:#fff;
}

转换元件旋转360度的按钮,一个完整的圆。其余的代码更改颜色和字体大小。
玩得高兴这一个。也许你可以使它有用的一些有趣的节日按钮。也许你甚至可以升级它旋转一个按钮,更改从一个到另一个图像。谁知道呢?可能性是无穷无尽的
HTML / CSS 相关文章推荐
纯CSS3实现圆角效果(含IE兼容解决方法)
May 07 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
HTML5 placeholder属性详解
Jun 22 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
HTML5的语法变化介绍
Aug 13 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
Dec 29 HTML / CSS
Html5 滚动穿透的方法
May 13 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
AmazeUI 图标的示例代码
Aug 13 HTML / CSS
CSS实现章节添加自增序号的方法
Jun 23 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 #HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 #HTML / CSS
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 #HTML / CSS
CSS3支持IE6, 7, and 8的边框border属性
Dec 28 #HTML / CSS
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 #HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
Dec 26 #HTML / CSS
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 #HTML / CSS
You might like
PHP操作路由器实现方法示例
2019/04/27 PHP
JQuery index()方法使用代码
2010/06/02 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
python实现文件的备份流程详解
2019/06/18 Python
Python新手学习函数默认参数设置
2020/06/03 Python
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
邮政竞聘演讲稿
2014/09/03 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
诚信承诺书
2015/01/19 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书