效果
实现
- 在 https://stories.freepik.com/、https://undraw.co/search 等网站下载喜欢的插画，下载格式为svg
- 将svg 转为Html 网页
- 观察dom 元素将几个元素添加css3 动画
svg 旋转
看了张鑫旭老师的博客《理解SVG transform坐标变换》，由于SVG元素的默认是SVG左上角为中心变换的。 实现SVG元素居中缩放的效果，可以使用translate手动偏移，先偏移回原点，缩放旋转后再偏移回来
代码语言：javascript复制@keyframes movecard {
0% {
transform: translate(340px, 135px) rotate(-8deg) translate(-340px, -135px);
}
100% {
transform: translate(340px, 135px) rotate(8deg) translate(-340px, -135px);
}
}
.card {
animation: movecard 5s ease-in infinite alternate;
}
