先從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度的按鈕,一個完整的圓。其余的代碼更改顏色和字體大小。