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实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 HTML / CSS
html5 分层屏幕适配的方法
Mar 16 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 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面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
vue实现图片上传功能
2020/05/28 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
浅谈python import引入不同路径下的模块
2017/07/11 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
python求质数的3种方法
2018/09/28 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
python爬虫 正则表达式解析
2019/09/28 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
爱耳日活动总结
2014/04/30 职场文书
学校标语大全
2014/06/19 职场文书
建筑学专业自荐书
2014/07/09 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
交通事故起诉书
2015/05/19 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers