當鼠標懸停在一個元素上時,根據您的鼠標的位置來製作一個旋轉卡的動作。
設置一個基於鼠標位置的旋轉:
設定視角
設定觸發器
製作旋轉的動畫
配置靜止狀態
創建一個鏡面高光
確保您要做動畫的子元素的父元素被選中
在過渡和變換下的樣式面板中,將子元素的視角改為1000像素
選擇您想作為觸發器的元素(例如卡片)
在互動面板中,點擊選定元素旁邊的加號,從下拉選單中選擇鼠標在元素上移動
點擊互動面板 > 鼠標移動時 > 動作 > 播放鼠標動畫
點擊鼠標動畫旁邊的加號
命名它(例如在鼠標移動時旋轉)
點擊鼠標X動作時間線下的加號,在0%處選擇旋轉
在旋轉下,將Y軸改為-5度
點擊100%處的卡片元素,在旋轉下將其Y軸改為5度
在鼠標Y動作下,添加一個旋轉的動作
在"旋轉"的0%處,將X軸改為5度
在100%的旋轉下,將X軸改為-5度
關閉動畫以調整平滑度
在交互面板中的鼠標移動時,將鼠標的X位置設置為50%。
將鼠標的Y位置設置為50%。
在畫布上拖動一個新的Div塊到您正在使用的元素裡面(Card)
創建一個class,並命名它(例如卡片-高光)
設定其寬度和高度(例如400像素)
將位置設置為絕對值
從左上角開始定位
設定背景顏色
在邊框下,將半徑改為50%
在"效果"下,將"不透明度"改為10%
添加一個模糊過濾器,將半徑改為50像素
在互動面板上,點擊鼠標移動時的旋轉
在鼠標X時間線的0%處添加一個移動動畫,將其X軸改為100%
在鼠標X時間線的100%處,添加一個移動動畫,並將其X軸改為-50%
在鼠標Y軸的時間線0%處,添加一個移動動畫,並將其Y軸改為50%
在鼠標Y軸的時間線上,在100%處添加一個移動動畫,並將其Y軸改為-50%