标签：50px transform rotateZ HTML CSS margin 方块 200px
HTML+CSS方块跳动
核心思想是将小方块放在隐形的大方块上，让大方块转动（rotate）带动小方块转动
将4个方块分别装上animation，注意：这4个方块的动画总时长必须是相等的，然后再用infinite无限循环，可以用不同数量的方块，但时间一定要掐好。
初学可以copy过去慢慢琢磨，我也是琢磨了好久才弄出来的！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>方块跳动</title>
<style>
.box01{
width: 200px;
height: 200px;
/* background-color: teal; */
overflow: hidden;
animation: jump1 3s infinite ease-in-out;
}
.box11{
width: 50px;
height: 50px;
border-radius: 20%;
background-color: tomato;
margin-top: 75px;
margin-left: 150px;
}
.box02{
width: 200px;
height: 200px;
margin-top: -200px;
margin-left: 150px;
/* background-color: teal; */
overflow: hidden;
animation: jump2 3s infinite ease-in-out;
}
.box22{
width: 50px;
height: 50px;
border-radius: 20%;
background-color: blue;
margin-top: 75px;
margin-left: 150px;
}
.box03{
width: 200px;
height: 200px;
margin-top: -200px;
margin-left: 300px;
/* background-color: teal; */
overflow: hidden;
animation: jump3 3s infinite ease-in-out;
}
.box33{
width: 50px;
height: 50px;
border-radius: 20%;
background-color: green;
margin-top: 75px;
margin-left: 150px;
}
.box04{
width: 200px;
height: 200px;
margin-top: -200px;
margin-left: 450px;
/* background-color: teal; */
overflow: hidden;
animation: jump4 3s infinite ease-in-out;
}
.box44{
width: 50px;
height: 50px;
border-radius: 20%;
background-color: skyblue;
margin-top: 75px;
margin-left: 150px;
}
.box0{
width: 50px;
height: 50px;
position: absolute;
top: 90px;
background-color: teal;
border-radius: 20%;
animation: su 1.5s linear alternate infinite;
}
@keyframes su {
to{
margin-left: 600px;
}
}
@keyframes jump1 {
from{
}
12.5%,87.5%{
transform:rotateZ(-180deg);
animation-delay: 2s;
}
to{
}
}
@keyframes jump2 {
12.5%{
transform: rotateZ(0deg);
}
25%{
transform: rotateZ(-180deg);
}
75%{
transform: rotateZ(-180deg);
}
87.5%{
transform: rotateZ(0deg);
}
}
@keyframes jump3 {
25%{
transform:rotateZ(0deg);
}
37.5%{
transform: rotateZ(-180deg);
}
62.5%{
transform: rotateZ(-180deg);
}
75%{
transform: rotateZ(-0deg);
}
}
@keyframes jump4 {
37.5%{
transform:rotateZ(0deg);
}
50%{
transform:rotateZ(-180deg);
}
62.5%{
transform:rotateZ(0deg);
}
}
</style>
</head>
<body>
<div class="box01">
<div class="box11"></div>
</div>
<div class="box02">
<div class="box22"></div>
</div>
<div class="box03">
<div class="box33"></div>
</div>
<div class="box04">
<div class="box44"></div>
</div>
<div class="box0"></div>
</body>
</html>
标签：50px,transform,rotateZ,HTML,CSS,margin,方块,200px 来源： https://blog.csdn.net/WCvison/article/details/114649712
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。