Day17 transform動畫效果

就是動畫效果咯。關於div(或)的旋轉，偏移等等效果。

旋轉效果

class

="main"
>
這是乙個奇怪的盒子div
>
.main

原本它只是個普普通通的盒子。

之後**的巫師嫉妒他的美貌。給它強行加上了.rotate 樣式

.rotate

然後它就變成了這樣了：

總得來說。transform:rotate();樣式旋轉的角度和rotate中的值有關，特別要記住的是單位是deg(加粗了)。

偏移效果

很不幸**的巫婆又要霸佔它舒適的窩。又強行給他新增了.translate樣式的魔法

.translate

它就變成了：

偏得有點近。咳咳，問題不大。

使盒子長和寬以倍數增大。

它再也忍受不了巫婆的折磨了，於是開始祈禱。上帝被它的虔誠而感動，賜予了.scale樣式給它。

scale

只見div身寬擴大了兩倍，身長增加了四倍。

這…這難道就是傳說中的變大魔法。流批流批…

將x軸和y軸的角度改變。

他獲得變大魔法之後，一度猖獗，開始找巫婆復仇。巫婆見狀不妙，不急不忙地給它施加了變小魔咒，同時該參雜著.skew樣式的魔咒。

skew

於是它變成了奇怪的樣子。

稍微講下。大概是這個樣子。

闊以自己實驗一哈。

動畫的過度效果

上帝再也看不下去他們無休止的爭吵，於是把所有transform的樣式變成了偽類，當巫婆再欺負它時，就會觸發。並且為了讓一切看起來自然，上帝還賦予了盒子transition樣式。

.main

.main:hover

長時間的鬥爭使它多了text-shadow（心理陰影）和box-shadow（心外陰影）樣式。使得它看起如此的飽經滄桑。

text-shadow：文字的陰影效果。

box-shadow：盒子的陰影效果。

shadow的四個引數。

width和height【也就是前兩個引數】:表示偏移距離。

第三個引數:表示模糊距離，也就是陰影所產生的距離。

第四個引數:表示陰影顏色。

大概這個鬼樣子

但是萬萬沒想到的是。上帝完了施展的魔法只有最後乙個有效【優先順序的意思】，所以巫婆一觸碰盒子，它只會變大，且所新增了陰影也會相應變大。

嗷嗚~對了忘了說transition: width 2s, height 2s, transform 2s;了。

就是觸發hover時。盒子不會立馬變大，會在2秒鐘之內緩慢變大。

已更完~~撒花★,°:.☆(￣▽￣)/$:.°★ 。【可以去當編劇了，腦補了一出大戲。】

實習日記 Day17

今日份 更新 今日份流水賬 需求更新 身為乙方，每當甲方需求更新的時候，應該都很煩吧。但是我發現我自己，也許是性格使然吧，居然覺得能盡可能去滿足客戶的需求，也是一件很有成就感的事。反倒是讓我提需求的話，我會產生一種給別人添麻煩的不適感 不過這也可能是我今日份的感想，換個日子興許就不這樣想了。工具更新...

day17物件導向

1.面向過程程式設計 一遇到問題馬上想到的是怎麼用演算法或者步驟 邏輯 直接解決問題 2.函式式程式設計 一遇到問題馬上想到有沒有乙個函式具有解決這個問題的功能，如果有直接拿過來用，沒有就自己定義乙個 3.物件導向程式設計 遇到問題馬上想到有沒有乙個物件具有解決這個問題的能力，如果有直接拿過來用，沒...

每日演算法 day 17

那些你早出晚歸付出的刻苦努力，你不想訓練，當你覺的太累了但還是要咬牙堅持的時候，那就是在追逐夢想，不要在意終點有什麼，要享受路途的過程，或許你不能成就夢想，但一定會有更偉大的事情隨之而來。mamba out 2020.2.29 簡單模擬 include include include include...