css动画发现
最近在探索css动画的时候,发现了一个很好的现象
当一个有元素嵌套的时候,父元素有动画,子元素也有动画,那么子元素的运动会相对父元素的运动而运动
举个例子,假如父元素是一个宽100,高100的盒子,它在从屏幕左侧运动到屏幕右侧。
这个父元素的里面有一个宽10高10的子元素,它不停的从父元素左上角移动到右下角再移动回来。
那么我们看到的子元素是怎样的运动轨迹?其实是在屏幕上走折线。是一种复合的运动!
我们就可以利用这个特性来实现复杂的效果了!
我做了一个套娃旋转的实例,在这里分享一下
效果截图
旋转.gif
2021-7-15_16-18-39.png
2021-7-15_16-19-0.png
源代码
Title
下一篇文章我会分享利用这个特点来实现人体走路动画的纯css代码