css旋转播放按钮,CSS_css3 旋转按钮 使用CSS3创建一个旋转可变色按钮，想把访客引到另一个页面?添加 - phpStudy...

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

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

这是一个演示旋转的CSS3按钮。让我们先从HTML:

复制代码代码如下:

旋转按钮

和现在的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度的按钮,一个完整的圆。其余的代码更改颜色和字体大小。

玩得高兴这一个。也许你可以使它有用的一些有趣的节日按钮。也许你甚至可以升级它旋转一个按钮,更改从一个到另一个图像。谁知道呢?可能性是无穷无尽的相关阅读:

android通过配置文件设置应用安装到SD卡上的方法

JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)

使用css3匹配手机屏幕横竖状态

jQuery实现鼠标滑过点击事件音效试听

Linux系统中备份和恢复文件权限设置的教程

jquery mobile changepage的三种传参方法介绍

在Linux系统中创建新的亚马逊AWS访问密钥的方法

系统更新到OS X Yosemite之后无法登陆的解决方法

Linux系统下使用uname命令显示系统和硬件信息

c#使用win32api实现获取光标位置

JS实现鼠标箭头变成一个燃烧烛光效果的方法

详解Linux系统中crontab命令处理定时任务的用法

a标签的target链接指向iframe的方法

深入理解JavaScript中的对象复制(Object Clone)