css旋转按钮制作,css3旋转按钮使⽤CSS3创建⼀个旋转可变
⾊按钮
想把访客引到另⼀个页⾯?添加⼀个很炫的按钮是个很好的办法 !今天的⽂章提出了如何使⽤css3创建⼀个旋转，旋转，可变⾊按钮。
这是⼀个演⽰旋转的css3按钮。让我们先从html:
复制代码代码如下:
和现在的css:
复制代码代码如下:
.button
{
background:#aaa;
color:#555;
font-weight:bold;
font-size:15px;
padding:10px 15px;
fontweight属性bold
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度的按钮,⼀个完整的圆。其余的代码更改颜⾊和字体⼤⼩。
玩得⾼兴这⼀个。也许你可以使它有⽤的⼀些有趣的节⽇按钮。也许你甚⾄可以升级它旋转⼀个按钮，更改从⼀个到另⼀个图像。谁知道呢?可能性是⽆穷⽆尽的

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。