css动画发现
最近在探索css动画的时候，发现了一个很好的现象
当一个有元素嵌套的时候，父元素有动画，子元素也有动画，那么子元素的运动会相对父元素的运动而运动
举个例子，假如父元素是一个宽100，高100的盒子，它在从屏幕左侧运动到屏幕右侧。
这个父元素的里面有一个宽10高10的子元素，它不停的从父元素左上角移动到右下角再移动回来。
那么我们看到的子元素是怎样的运动轨迹？其实是在屏幕上走折线。是一种复合的运动！
我们就可以利用这个特性来实现复杂的效果了！
我做了一个套娃旋转的实例，在这里分享一下
效果截图
旋转.gif
2021-7-15_16-18-39.png
2021-7-15_16-19-0.png
源代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
overflow: hidden;
background-color: black;
}
/*
给参与旋转的每一个框框添加样式以及旋转动画
由于这里只有div没有其他元素，所以就直接用标签选择器，不用类名选择器了
*/
div {
padding: 5px;
border: solid 1px lightgreen;
width: 90%;
height: 90%;
margin: 0 auto;
/* 调用旋转动画，周期15秒无限循环，线性运动而非缓入缓出 */
animation: myRotate 15s infinite linear;
transition: all 0.5s;
}
div:hover {
box-shadow: 0 0 10px yellow;
background-color: rgba(0, 200, 200, 0.1);
}
.b1 {
width: 1000px;
height: 100px;
margin: 200px auto;
}
@keyframes myRotate {
0% {
transform: rotate(0deg);
border-radius: 0;
}
50% {
border-color: blue;
border-radius: 100px;
}
100% {
transform: rotate(360deg);
border-radius: 0;
}
}
</style>
</head>
<body>
<!-- 此div套娃可以用js递归函数来实现 -->
<div class="b1">
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
下一篇文章我会分享利用这个特点来实现人体走路动画的纯css代码
