前端特效(2) 旋轉的風車

2021-10-03 00:25:27 字數 1162 閱讀 6915

旋轉的風車效果主要利用的知識點:

變形:transform:rotate() // 旋轉度數(deg)

過渡:transition集合樣式(css3的動畫的一種)

transition-property:要運動的樣式(all || [attr] || none)

transition-duration:規定完成過渡效果需要多少秒或毫秒

transition-delay:定義動畫延遲多久開始

transition-timing-function:運動速度曲線。

圓角:

border-radius集合樣式

(border-top-left-radius/border-top-right-radius/border-bottom-right-radius/border-bottom-left-radius)

1-4個數字 / 1-4個數字:/前面是水平方向圓角,後面是垂直方向圓角,不加/指的兩個方向圓角相同,如:

border-radius: 10px/5px;

引數:各種長度單位都可以:px,%,…,%有時很方便,但寬高不一致時不太好

引數個數1:四個方向都一樣,border-radius: 一樣

引數個數2:對角,border-radius: 左上&右下 右上&左下

引數個數3:斜對角,border-radius: 左上 右上&左下 右下

引數個數4:全部,順時針,border-radius: 左上 右上 右下 左

.parent

.parent>div

.parent>div:nth-

child(1

),.parent>div:nth-

child(4

).parent>div:nth-

child(2

),.parent>div:nth-

child(3

).parent:hover

<

/style>

效果圖:(此處有動畫效果 滑鼠懸停在上面的時候進行旋轉)

半透明旋轉魔方特效的實現

lang ch charset utf 8 旋轉魔方title type text css html all 設定all下的所有的div的樣式 給他們寬高和透明效果 all div img 先平移再旋轉 沿x軸平移 左負右正 沿y軸平移 上負下正 沿z軸平移 前正後負 box1 box2 box3 ...

如何用css3實現簡單旋轉的風車

如何用css3實現簡單旋轉的風車 在dw中想要實現旋轉的風車就要使用關鍵幀keyframes來設定旋轉,其實也沒什麼難度的。先設定它的樣式,然後要用定位把它放到合適的位置就可以了。html的 如下 class fengche class zhu div class zhuan class z div...

iOS上實現滑動旋轉波浪的特效

ios開發主要介紹如何使用ios提供的強大工具集建立ios應用。全書對ios作業系統做了全面的介紹,首先講解如何構建應用程式的使用者介面,涵蓋從使用storyboard連線檢視控制器到繪製自定義檢視的所有技能 接著介紹如何使用icloud儲存和core data管理應用程式的資料模型,並在多個設 備...