掘金頭像的旋轉(transform)

2021-09-08 08:01:28 字數 1087 閱讀 2679

在瀏覽掘金個人主頁的時候滑鼠放在了頭像上發現了頭像竟然旋轉的越來越快,想用js的setinterval實現一下這個旋轉,但是發現效果不好,最後發現掘金的實現方式只用了css3。

#pic:hover

首先給任意的元素加上這些css就可以進行旋轉了。

檢視了一下這些屬性的意思,下面介紹一下

transform

transition-delay

transition-property

transition-duration

transition-timing-function

rotate(666trun)

1sall

59scubic-bezier(0.34,0,0.84,1)

以上是該效果所用到的css屬性。

transform: rotate(666turn);常見的用來旋轉元素角度的css,這裡用到的是turn,1turn = 360°

transition-property: all;這個屬性是指明效果變換的位置,比如width,height等,all是所有屬性。

transition-duration: 59s;過渡效果的持續時間。

transition-timing-function: cubic-bezier(.34,0,.84,1);過渡效果的速度曲線 四個值的範圍都是0-1 代表整個過程。

transition-delay:1s;這個屬性的作用就是效果執行前的等待時間

後四個屬性可以簡寫為transition: all 59s cubic-bezier(.34,0,.84,1) 1s;順序為transition-property,transition-duration,transition-timing-function 和 transition-delay

最後簡寫樣式:

#pic:hover

IOS圓形頭像的設定

在開發中我們經常會用到頭像,但是系統的uiimageview預設是矩形,然而實際開發中一般都是需要將頭像設定為圓形,今天我和大家聊兩種比較常見的設定圓形頭像的方法。第一種 設定uiimageview的稜角。很簡單 頭像的寬高必須是一致的 cgfloat height 40.0 uiimageview...

Glide 圓形頭像的使用

注意事項 skipmemorycache true diskcachestrategy diskcachestrategy.source 使用bitmaptransformation變換 此類由網上所找的 修改,修正了原版的bugpublic class glidecircletransform e...

圓形的頭像 會有鋸齒

public class mainactivity extends activity private void initview 上傳檔案到bmob後台 public void upload view v override public void onfailure int arg0,string ...