有对象的小伙伴们可以写一个发给对象哦 是会跳动的
http://C:\Users\余胖子\Documents\WeChat Files\wxid_c9p1anl9iieh22\FileStorage\File\2023-05
/* 调整小盒子位置 */
.box div {
/* 定位 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 宽高 背景色 */
width: 200px;
height: 200px;
background-color: red;
/* 调用动画 */
animation: box-dh 1.3s linear infinite;
}
/* 给小盒子添加伪元素 */
.box div::before {
content: '';
/* 定位 */
position: absolute;
left: 0;
top: 0;
transform: translateX(-70%);
/* 宽高 背景色*/
width: 100%;
height: 100%;
background-color: red;
/* 圆角边框 */
border-radius: 50% 0 0 50%;
}
/* 给小盒子添加伪元素 */
.box div::after {
content: '';
/* 定位 */
position: absolute;
left: 0;
top: 0;
transform: translateY(-70%);
/* 宽高 背景色 */
width: 100%;
height: 100%;
background-color: red;
/* 圆角边框 */
border-radius: 50% 50% 0 0;
}
/* 定义动画 */
@keyframes box-dh {
0% {
transform: translate(-50%, -50%) scale(0.95);
}
5% {
transform: translate(-50%, -50%) scale(1.1);
}
38% {
transform: translate(-50%, -50%) scale(0.85);
}
45% {
transform: translate(-50%, -50%) scale(1);
}
60% {
transform: translate(-50%, -50%) scale(0.95);
}
100% {
transform: translate(-50%, -50%) scale(1.9);
}
}