CSS 3是一種用于網頁標記語言(HTML)上的樣式表語言,它可以用來為網頁添加各種美觀的樣式和交互效果。其中,單個翅膀煽動是CSS 3中一個很酷的效果。
要實現單個翅膀煽動的效果,需要用到transform屬性。在pre標簽中,我們可以寫一段類似以下的代碼:
.wing { position: relative; width: 200px; height: 200px; background-color: #f5f5f5; transform: rotate(45deg); } .wing:before, .wing:after { position: absolute; content: ""; top: 0; left: 0; background-color: #333; transform-origin: right top; transition: transform 0.5s ease-out; } .wing:before { width: 100px; height: 200px; transform: rotate(0deg); } .wing:after { width: 200px; height: 50px; transform: rotate(90deg); } .wing:hover:before { transform: rotate(-40deg); } .wing:hover:after { transform: rotate(40deg); }
以上代碼中,我們首先定義了一個class為wing的元素,并賦予其一些基本樣式,比如寬度、高度和背景色等。然后,在這個元素的before和after偽元素中,我們定義了兩個翅膀的樣式。這里before翅膀寬度為100px,高度為200px,而after翅膀寬度為200px,高度為50px。兩個偽元素都通過transform-origin屬性設置了旋轉中心。
接下來,在鼠標移入時,我們通過:hover偽類來設置before和after翅膀的動畫效果。在:hover:before中,我們把它轉動了-40度,而:hover:after中,我們把它轉動了40度。這樣,當鼠標移入時,單個翅膀就像在煽動一樣。
通過上述CSS 3代碼,我們就可以實現單個翅膀煽動的效果。這個效果不僅很酷炫,而且在網頁上使用也非常靈活,可以用于各種元素的裝飾和交互效果。
上一篇css 3 圖片自動輪播
下一篇css彈性盒布局二端對齊