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中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
详解CSS3中@media的实际使用
Aug 04 HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 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转成EXE文件
2006/10/09 PHP
php开发工具有哪五款
2015/11/09 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
toString()一个会自动调用的方法
2010/02/08 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
Python中单、双下划线的区别总结
2017/12/01 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
中国梦的演讲稿
2014/01/08 职场文书
军训考核自我鉴定
2014/02/13 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
Vue如何清空对象
2022/03/03 Vue.js
python 单机五子棋对战游戏
2022/04/28 Python