css3 跳跃 |css3多选框美化

.box {
width: 50px;
height: 50px;
background-color: #ccc;
position: relative;
animation: jump 1s ease-in-out infinite;
}
@keyframes jump {
0% {
top: 0px;
}
50% {
top: -20px;
}
100% {
top: 0px;
}
}

通过以上代码，大家可以看出来，跳跃动画是通过定位属性top来控制的。当top为0px时，.box元素的位置在页面上最高点，当top为-20px时，.box元素在页面上最低点，中间过程是通过关键帧控制的。其中，animation属性指定了动画的名称、时间以及动画的播放方式。在这个例子中，动画名称为jump，时间为1s，播放方式是先慢后快的过渡。

当大家把以上代码应用于html页面中时，会得到一个在页面上上下跳跃的方块。这个动画的美观性和实用性让它在网页开发中应用广泛。只需要简单的CSS3代码，就可以让你的页面增添不少生动趣味。