做法: 两个星重叠,触发时,让第一个星放大变色,然后透明度为0，同时设置第二个星为原来大小且为红色
代码示例: 效果图:
做法: 兩個div重疊,元素設置背面不可見屬性,剛開始將第二個div繞y軸翻轉180度不可見 當鼠標放上父元素時,讓兩個子元素都旋轉,設置第一個子元素繞y軸翻轉180度不可見,讓第二個子元素繞y軸翻轉回0度可見 代碼示例:
transform變化: 以' '空格分隔,可以一次寫多個變化 同個元素多個transform,其他transform不會保留之前的效果,需要重寫 移動: translateX(npx); translateY(np
做法: 在設置好平面div後,利用其前後僞類,定位到左邊和下邊, 分別設置左邊向上傾斜,下面像左傾斜,最後設置整個平面傾斜增加立體感 代碼示例: <!DOCTYPE html> <html> <head> <meta
做法: 平面div,設置前後僞類分別覆蓋一半大小,設置前面的僞類旋轉點爲最左邊的線,旋轉角度爲負值向外 設置後面的僞類旋轉點爲最右邊的線,旋轉角度爲正值向內 設置最外層元素transform-style: preserve-
代碼示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="./ind
做法: a標籤+target僞類,a標籤的id綁定頁面元素的id,初始元素在屏幕外, 使用target僞類當點擊超鏈接時添加移動樣式,並會顯示對應target元素的內容 代碼示例: <!DOCTYPE html> <html
思路: 重疊四個圖片,然後設置行變點在中心的z軸往後的方向上,分別設置其他圖片 繞y軸的旋轉角度,設置父容器的行變中心點和圖片一樣並設置透視和3d屬性。 若要俯瞰繞中心點旋轉:設置父元素繞x軸旋轉一定角度後,hover放
做法: 給按鈕的文字添加僞類,然後利用陰影是移動和原本元素大小相同的原理 在動畫中依次添加多個水平方向移動的陰影 代碼示例: <!DOCTYPE html> <html> <head> <meta charset="u
做法: 6個div重疊,設置旋轉中心點爲z軸上某一點,按水平四個面,分別按中心點 旋轉90度、180度、270度等,上下兩個面，分別將旋轉點設置在div的上邊線和下邊線,再分別繞x軸旋轉對應的90度 代碼示例: <!DOCT
