在CSS中制作扇葉可以使用rotate函數和transition效果。
/*首先定義一個div元素作為扇葉*/ div { width: 100px; height: 100px; background-color: green; position: relative; transform-origin: top left; /*設置旋轉基點位置*/ transition: transform 1s ease; /*添加過渡效果*/ } /*然后設置hover狀態下的樣式*/ div:hover { transform: rotate(90deg); /*當鼠標指針懸停時旋轉90度*/ }
以上CSS代碼中,transform-origin屬性設置了旋轉基點的位置,設為top left時,扇葉會圍繞左上角旋轉。transition屬性添加了過渡效果,使扇葉旋轉時會有一個平滑的過渡效果。在hover狀態下,通過改變transform屬性中rotate的度數來控制扇葉的旋轉。通過改變rotate的度數可以實現不同角度的旋轉效果。
上一篇怎么鏈入css
下一篇mysql中增加一個登錄