css3动画跳动的球

* { margin: 0; padding: 0; list-style-type: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.wrapper { height: 40px; width: 184px; position: absolute; top: 50%; left: 50%; margin: -20px 0 0 -80px;}.wrapper > ul { height: inherit; width: 100%; display: block;}.container { width: 46px; height: inherit; float: left;}.sphere { position: relative; height: 40px; width: 40px; border: 6px solid #222; border-radius: 50%; background: #222; margin-left: 3px; top: 0;}.container:nth-of-type(1) .sphere { -webkit-animation: bounce 2s infinite ease-in-out; /* Safari 4+ */ -moz-animation: bounce 2s infinite ease-in-out; /* Fx 5+ */ -o-animation: bounce 2s infinite ease-in-out; /* Opera 12+ */ animation: bounce 2s infinite ease-in-out; /* IE 10+ */}.container:nth-of-type(2) .sphere { -webkit-animation: bounce 2s infinite .2s ease-in-out; /* Safari 4+ */ -moz-animation: bounce 2s infinite .2s ease-in-out; /* Fx 5+ */ -o-animation: bounce 2s infinite .2s ease-in-out; /* Opera 12+ */ animation: bounce 2s infinite .2s ease-in-out; /* IE 10+ */}.container:nth-of-type(3) .sphere { -webkit-animation: bounce 2s infinite .4s ease-in-out; /* Safari 4+ */ -moz-animation: bounce 2s infinite .4s ease-in-out; /* Fx 5+ */ -o-animation: bounce 2s infinite .4s ease-in-out; /* Opera 12+ */ animation: bounce 2s infinite .4s ease-in-out; /* IE 10+ */}.container:nth-of-type(4) .sphere { -webkit-animation: bounce 2s infinite .6s ease-in-out; /* Safari 4+ */ -moz-animation: bounce 2s infinite .6s ease-in-out; /* Fx 5+ */ -o-animation: bounce 2s infinite .6s ease-in-out; /* Opera 12+ */ animation: bounce 2s infinite .6s ease-in-out; /* IE 10+ */}/* Green */@-webkit-keyframes bounce { 0% { top: 0; } 25% { top: -180px; } 50% { top: 0; } 100% { top: 0; }}@-moz-keyframes bounce { 0% { top: 0; } 25% { top: -180px; } 50% { top: 0; } 100% { top: 0; }}@-o-keyframes bounce { 0% { top: 0; } 25% { top: -180px; } 50% { top: 0; } 100% { top: 0; }}@keyframes bounce { 0% { top: 0; } 25% { top: -180px; } 50% { top: 0; } 100% { top: 0; }}span.shadow { height: 10px; width: 40px; display: block; background: rgba(0,0,0,0.45); margin-left: -20px; border-radius: 50%; position: relative; left: 50%;}@-webkit-keyframes depth { 0% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); } 25% { height: 4px; width: 20px; background: rgba(0,0,0,0.25); } 50% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); } 100% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); }}@-moz-keyframes depth { 0% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); } 25% { height: 4px; width: 20px; background: rgba(0,0,0,0.25); } 50% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); } 100% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); }}@-o-keyframes depth { 0% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); } 25% { height: 4px; width: 20px; background: rgba(0,0,0,0.25); } 50% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); } 100% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); }}@keyframes depth { 0% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); } 25% { height: 4px; width: 20px; background: rgba(0,0,0,0.25); } 50% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); } 100% { height: 10px; width: 40px; background: rgba(0,0,0,0.45); }}.container:nth-of-type(1) .shadow { -webkit-animation: depth 2s infinite ease-in-out; /* Safari 4+ */ -moz-animation: depth 2s infinite ease-in-out; /* Fx 5+ */ -o-animation: depth 2s infinite ease-in-out; /* Opera 12+ */ animation: depth 2s infinite ease-in-out; /* IE 10+ */}.container:nth-of-type(2) .shadow { -webkit-animation: depth 2s infinite .2s ease-in-out; /* Safari 4+ */ -moz-animation: depth 2s infinite .2s ease-in-out; /* Fx 5+ */ -o-animation: depth 2s infinite .2s ease-in-out; /* Opera 12+ */ animation: depth 2s infinite .2s ease-in-out; /* IE 10+ */}.container:nth-of-type(3) .shadow { -webkit-animation: depth 2s infinite .4s ease-in-out; /* Safari 4+ */ -moz-animation: depth 2s infinite .4s ease-in-out; /* Fx 5+ */ -o-animation: depth 2s infinite .4s ease-in-out; /* Opera 12+ */ animation: depth 2s infinite .4s ease-in-out; /* IE 10+ */}.container:nth-of-type(4) .shadow { -webkit-animation: depth 2s infinite .6s ease-in-out; /* Safari 4+ */ -moz-animation: depth 2s infinite .6s ease-in-out; /* Fx 5+ */ -o-animation: depth 2s infinite .6s ease-in-out; /* Opera 12+ */ animation: depth 2s infinite .6s ease-in-out; /* IE 10+ */}

在线演示        积分下载        6毛下载        砍两刀下载