叶子形状的loading

来源：互联网发布：沪港通资金流向软件编辑：程序博客网时间：2024/04/28 20:38

<!doctype html><html><head><style type="text/css">body{ background: #000;}.color1{ background: #FDE515;}.color2{ background: #00DEF2;}@-webkit-keyframes loadRotate{from{ -webkit-transform:rotateZ(0deg);}to{ -webkit-transform:rotateZ(360deg);}}@keyframes loadRotate{from{ transform:rotateZ(0deg);}to{ transform:rotateZ(360deg);}}#loading{ width: 100px; height: 100px; position: absolute; left:50%; top:50%; margin-left:-50px; margin-top: -50px; -webkit-animation:loadRotate 3s linear infinite; -webkit-animation-fill-mode:both; animation:loadRotate 3s linear infinite; animation-fill-mode:both;}#loading div{ width: 20px; height:30px; position: absolute;left:40px; top:35px; -webkit-transform:rotateZ(0) translateX(60px) ; opacity: 1; border-radius: 50% 0; }#loading div:nth-child(2){-webkit-transform:rotateZ(36deg) translateX(60px) ; opacity: 0.8; }#loading div:nth-child(3){-webkit-transform:rotateZ(72deg)  translateX(60px); opacity: 0.6; }#loading div:nth-child(4){-webkit-transform:rotateZ(108deg)  translateX(60px);  opacity: 0.4;}#loading div:nth-child(5){-webkit-transform:rotateZ(144deg) translateX(60px) ;  opacity: 0.2;}#loading div:nth-child(6){-webkit-transform:rotateZ(180deg) translateX(60px) ; opacity: 1; }#loading div:nth-child(7){-webkit-transform:rotateZ(216deg) translateX(60px)  ; opacity: 0.8; }#loading div:nth-child(8){-webkit-transform:rotateZ(252deg) translateX(60px) ; opacity: 0.6; }#loading div:nth-child(9){-webkit-transform:rotateZ(288deg) translateX(60px) ; opacity: 0.4; }#loading div:nth-child(10){-webkit-transform:rotateZ(324deg) translateX(60px) ; opacity: 0.2; }</style></head><body><div id="loading"><div class="color1"></div><div class="color1"></div><div class="color1"></div><div class="color1"></div><div class="color1"></div><div class="color2"></div><div class="color2"></div><div class="color2"></div><div class="color2"></div><div class="color2"></div></div></body></html>

公司要求换一个loading，然后随便写写，改了下border-radius的参数，发现这个类似叶子形状的挺不错的啊，哈哈~

0 0