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样式中的 !important * _ 符号
Mar 09 HTML / CSS
css3中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 HTML / CSS
一款基于css3的列表toggle特效实例教程
Jan 04 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
HTML5计时器小例子
Oct 15 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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
php将文本文件转换csv输出的方法
2014/12/31 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
PHP实现简易图形计算器
2020/08/28 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
python实现日常记账本小程序
2018/03/10 Python
对pandas中to_dict的用法详解
2018/06/05 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
基于python生成器封装的协程类
2019/03/20 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
《望洞庭》教学反思
2014/02/16 职场文书
班班通校本培训方案
2014/03/12 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
监察建议书格式
2014/05/19 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
个人安全生产责任书
2014/07/28 职场文书
阿甘正传观后感
2015/06/01 职场文书
公司保密管理制度
2015/08/04 职场文书
MySQL之DML语言
2021/04/05 MySQL
零基础学java之循环语句的使用
2022/04/10 Java/Android