css3 转动按钮 应用CSS3建立1个转动可变色按钮

2021-03-10 18:23 jianzhan
想把访客引到另外一个网页页面?加上1个很炫的按钮是个很好的方法 !今日的文章内容提出了怎样应用CSS3建立1个转动,转动,可变色按钮。
这是1个演试转动的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度的按钮,1个详细的圆。其余的编码变更色调和字体样式尺寸。
玩得开心这1个。或许你可使它有效的1些趣味的节日按钮。或许你乃至能够升級它转动1个按钮,变更从1个到另外一个图象。谁了解呢?将会性是无限无穷的