css 球晃动 |输入框文字点击消失css

.ball {
width: 150px;
height: 150px;
background-color: #FFD700;
border-radius: 50%;
position: relative;
animation-name: shaky;
animation-duration: 0.5s;
animation-iteration-count: infinite;
}
@keyframes shaky {
20% {
transform: translateX(-5px) rotate(-20deg);
}
40% {
transform: translateX(5px) rotate(20deg);
}
60% {
transform: translateX(-5px) rotate(-20deg);
}
80% {
transform: translateX(5px) rotate(20deg);
}
100% {
transform: translateX(0) rotate(0);
}
}

以上是球晃动的CSS样式代码，在这个代码中，大家通过设置animation-name、animation-duration和animation-iteration-count属性来实现动画效果。同时，大家使用了@keyframes来定义动画的实现方式。首先将球体定位在相对位置，然后通过变换形状、位置以及旋转来模拟球的运动状态。

球晃动效果非常炫酷，达到了预期的效果，大家也可以在实际项目中使用这项技术。使用这项技术可以让大家在一些动画效果中添加非常多的设计元素，可以让大家在一些WEB设计中实现更好的用户体验。