[分享]css3弹跳3个盒子

CSS3是现代网页设计必须学习的技能之一，它不仅可以让页面更加美观，还可以增加交互性和用户体验。本文将介绍如何使用CSS3制作三个盒子弹跳的效果。 .box { : relative; width: ...

CSS3是现代网页设计必须学习的技能之一，它不仅可以让页面更加美观，还可以增加交互性和用户体验。本文将介绍如何使用CSS3制作三个盒子弹跳的效果。

.box {
		position: relative;
		width: 100px;
		height: 100px;
		background-color: #f9c859;
		border-radius: 50%;
		animation: bounce 2s ease-in-out infinite;
	}
	.box1 {
		animation-delay: 0.5s;
	}
	.box2 {
		animation-delay: 1s;
	}
	
	@keyframes bounce {
	  	0% { 
		    	transform: translateY(-100%);
		  	}
		
		50% {
		    	transform: translateY(0);
		  	}
		
		100% {
		    	transform: translateY(-100%);
		  	}
	} 

以上代码就是实现三个盒子弹跳效果的CSS3代码。首先定义了一个.box类，设置了position、width、height、background-color和border-radius等属性，并使用animation属性设置了bounce动画效果。其中，ease-in-out表示动画效果由减速到加速再减速，infinite表示效果无限循环。

接着，给三个盒子分别定义.box1和.box2类，并使用animation-delay属性设置弹跳时间间隔。这样，三个盒子会分别弹跳起来，效果更加生动。

最后，编写bounce动画效果。使用@keyframes关键字定义动画，设置三个时间节点点：0%、50%和100%。在0%时，盒子处于最高点，竖直方向向上移动100%；在50%时，盒子处于最低点，竖直方向上移动0%；在100%时，盒子再次处于最高点，竖直方向上移动-100%。通过这三个时间节点的配合，就实现了盒子弹跳效果。

需要注意的是，这里使用了transform: translateY属性进行位移，对于transform属性的前缀也需要加上-webkit-、-moz-等浏览器私有前缀，以保证效果在各个浏览器中正常展示。