动效是个万金油，哪都能用到 -webkit-transform: os 系统是 webkit,windows 是 - ms
即变换，分为旋转，缩放，平移，和倾斜变形
# 第一个动效
![]()
魔改自该网站 https://screenlane.com/?ref=uimovement
注意：这个仅由 css3 控制的动效仅适应如上图简单的条件下，复杂的条件下 (可以用 js 实现),css (暂时不会) 思路是：将当前的 container 作为一个 relative 容器，其子容器均为 abslute, 根据 top,left,bottom.right 来调整大小
设置一个子容器使用 sv-copy-rotate, 只填充颜色.
设置其他的 z-index 均大于该层.
然后设置旋转动画
设置父节点 (main) 被 hover 时调用子节点，focus 时子节点不动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| .sv-rotate-main{
position: relative;
padding-bottom: 50%;
}
.sv-rotate-content{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.sv-rotate-content *{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.sv-copy-rotate{
position:absolute;
top:0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: black;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(-1);
transform: perspective(1px) translateZ(-1);
box-shadow: 0 0 1px rgba(0,0,0,0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
-moz-transition-property: transform;
}
.sv-copy-rotate:active,
.sv-copy-rotate:focus,
.sv-copy-rotate:hover{
-webkit-transform: rotate(4deg);
transform:rotate(4deg);
}
.sv-rotate-main:hover .sv-copy-rotate,
.sv-rotate-main:focus .sv-copy-rotate{
opacity: 0.8;
transform: rotate(2deg);
}
|
魔改自该网站 https://screenlane.com/?ref=uimovement