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 相关文章推荐
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
CSS3 完美实现圆角效果
Jul 13 HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 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中include()与require()的区别说明
2010/03/10 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
python获取豆瓣电影简介代码分享
2014/01/16 Python
pyqt和pyside开发图形化界面
2014/01/22 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
Django之腾讯云短信的实现
2020/06/12 Python
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
精细化工应届生求职信
2013/11/17 职场文书
平面设计专业求职信
2014/08/09 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书
读书笔记格式
2015/07/02 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
Python一行代码实现自动发邮件功能
2021/05/30 Python