首頁 >web前端 >css教學 >使用CSS3建立一個旋轉可變色按鈕

使用CSS3建立一個旋轉可變色按鈕

不言原創: 2018-07-02 10:17:011936瀏覽

這篇文章主要介紹了關於使用CSS3創建一個旋轉可變色按鈕，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

想把訪客引到另一個頁?增加一個很炫的按鈕是個很好的辦法!今天的文章提出瞭如何使用CSS3創建一個旋轉,旋轉,可變色按鈕,需要了解的朋友可以參考下

想把訪客引到另一個頁面?添加一個很炫的按鈕是個很好的辦法!今天的文章提出瞭如何使用CSS3創建一個旋轉,旋轉,可變色按鈕。
這是一個示範旋轉的CSS3按鈕。讓我們先從HTML:

<p> 
<a class="button">旋转按钮</a> 
</p>

和現在的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度的按鈕,一個完整的圓。其餘的程式碼更改顏色和字體大小。
玩得高興這一個。也許你可以使它有用的一些有趣的節日按鈕。也許你甚至可以升級它旋轉一個按鈕,更改從一個到另一個圖像。誰知道呢?可能性是無窮無盡的

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

使用CSS3建立一個旋轉可變色按鈕

相關文章