纯CSS动画打造~会动的小球-原创手记-慕课网

会动的小球，设计html,css知识点，另外动画是完全用css做的，很简单便捷哦~这只是一个小小的案例，以后为大家提供更多的案例！！
会动的小球
<!DOCTYPE html>

**<html><head><meta charset="UTF-8"><title>CSS3 loading图标</title><link rel="stylesheet" href="css/loading.css" /></head><body><div id="loading-3"><span class="item item-1"></span><span class="item item-2"></span></div></body></html>```**``css部分：div#loading-3{position: relative;width: 160px;height: 80px;margin: 100px auto;}div#loading-3 span.item{display: block;position: absolute;top: 25px;width: 30px;height: 30px;border-radius: 50%;animation-duration: 1.2s;animation-timing-function: ease-in-out;animation-iteration-count: infinite;animation-direction: alternate;}div#loading-3 span.item.item-1{left: 25px;background-color: #2ecc71;animation-name: loading_green;}div#loading-3 span.item.item-2{right: 25px;background-color: #e74c3c;animation-name: loading_red;}@keyframes loading_green{0%{left: 25px;width: 30px;height: 30px;background-color: #2ecc71;}50%{left: 100px;width: 40px;height: 40px;background-color: #9b59b6;}100%{left: 25px;width: 30px;height: 30px;background-color: #e74c3c;}}@keyframes loading_red{0%{right: 25px;width: 30px;height: 30px;background-color: #e74c3c;}50%{right: 100px;width: 40px;height: 40px;background-color: #9b59b6;}100%{right: 25px;width: 30px;height: 30px;background-color: #2ecc71;}}