大家好，我是路飛寫代碼，前端攻城獅，歡迎關注我，一起學習交流。
偶然機會發現了一個方向特效效果，感覺很不錯，然後就開始想著自己去實現一下，馬不停蹄我就開始分析其原理，並一步步實現效果。如果您對此感興趣，可以關注並私信我獲取源碼。
最終效果圖
我製作的原理圖
三個錨點位置（藍、紅、黃）div動效層的初始位置（初始旋轉角度、初始位置）div動效層旋轉方向和頂角錨點設置主要知識點
transform-origin: left top;設置或檢索對象以某個原點進行轉換。也就是設置中心點。transform：rotate(deg)。將元素旋轉某個角度。rotate()：指定對象的2D rotation（2D旋轉），需先有 <' transform-origin '> 屬性的定義 。animation: name duration timing-function delay iteration-count direction fill-mode; 通過@keyframes我們設置動畫幀，一個0%起始狀態，另一個100%起始狀態。然後我們就可以設置animation動畫animation-fill-mode:forwards;設置對象狀態為動畫結束時的狀態，也就是設置最後一幀transform-origin的具體用法如下：
transform-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?
默認值：50% 50%，效果等同於center center
適用於：所有塊級元素及某些內聯元素
動畫性：當值為數值時
計算值：除了指定絕對值，否則都為百分比。
主要難點分析
需要判斷滑鼠的滑入方向，是從上到下，還是從左到右、從右到左、從下到上。自己研究了一下需要一些正切函數才能做到精準判斷，數學忘光了，我從網上找到的一個方法可用。
判斷滑鼠滑入方向方向問題解決後，我們就可以將我們之前設置的幀動畫進行賦值。代碼貼圖
js代碼截圖（全）
js代碼貼圖（全）html布局截圖（全）
html元素布局（全）css代碼幀貼圖（部分）比較長，不在貼出所有CSS代碼。
CSS動畫幀（部分）結束語
一些我們看到的動畫效果，可以通過仔細分析其原理，進行庖丁解牛，這樣就會越來越清晰，當然也需要掌握基礎的知識。知道哪些動畫CSS可以完成。所以任何高級技術都是建立在紮實基礎之上。夯實基礎，才能夠觸類旁通。
我是路飛寫代碼，歡迎關注我，一起分享知識，交流經驗。如果您感興趣，可以關注並私信我獲取源碼，百家號發雲盤地址連結審核不通過，望知曉。
封面圖