关于html浮动四方块,跳动方块.html

Document

*{

margin:0px;

padding:0px;

}

html,body{

width: 100%;

height: 100%;

}

.div1{

width:100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

}

.div1:before{

content: "";

display: block;

width:150px;

height:150px;

background-color: steelblue;

border-radius: 30px;

animation: zhuan 1.5s infinite linear;

}

.div1::after{

content: "";

display: block;

width: 150px;

height: 15px;

background-color: tan;

margin-top: 5px;

border-radius: 50%;

animation: zhuan2 1.5s infinite linear;

}

@keyframes zhuan{

50%{

transform: translateY(-18px) rotate(-45deg);

border-bottom-left-radius: 90px;

}

100%{

transform: translateY(0px) rotate(-90deg);

}

}

@keyframes zhuan2{

50%{

width: 200px;

}

75%{

width: 180px;

}

100%{

width: 150px;

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史