<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<style type="text/css">
.div-child-out {
width: 300px;
height: 300px;
box-sizing: border-box;
margin: 50px;
transform: rotate(45deg);
animation: antRotate 1.2s infinite linear;
}
.div-child {
width: 150px;
height: 150px;
float: left;
border: 1px solid #cdcdcd;
box-sizing: border-box;
opacity: 0.3;
}
.div-child:nth-child(1) {
background: yellow;
border-radius: 13px 100px 0px 113px;
}
.div-child:nth-child(2) {
background: green;
border-radius: 140px 10px 174px 0px;
}
.div-child:nth-child(3) {
background: hotpink;
border-radius: 140px 4px 180px 12px;
}
.div-child:nth-child(4) {
background: aqua;
border-radius: 10px 359px 21px 339px;
}
@keyframes antRotate {
100% {
transform: rotate(405deg);
}
}
</style>
<body>
<div class="div-child-out">
<div class="div-child"></div>
<div class="div-child"></div>
<div class="div-child"></div>
<div class="div-child"></div>
</div>
<script>
</script>
</body>
</html>
我的动画
我的动画_2
