css实现五种loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现五种loading加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background-color: #e0e0eb; } .box { position: relative; height: auto; width: 80%; margin: auto; margin-top: 50px; background: white; text-align: center; box-shadow: 3px 3px 30px black; } h1 { padding-top: 20px; font-family: "Do Hyeon", sans-serif; } .spinner { border-radius: 50%; margin: 20px; display: inline-block; position: relative; height: 60px; width: 60px; background-color: #e0e0eb; } .spinnerOne::after { content: ""; position: absolute; border-radius: 50%; top: -5px; left: -5px; height: 60px; width: 60px; border: 5px solid transparent; border-top-color: #7389AE; animation: spinneroneani 0.5s linear infinite; } @keyframes spinneroneani { 25% { border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: #05A8AA; } 50% { border-top-color: transparent; border-right-color: transparent; border-bottom-color: #416788; border-left-color: transparent; transform: rotate(180deg) scale(1.2); } 75% { border-top-color: transparent; border-right-color: #2F6690; border-bottom-color: transparent; border-left-color: transparent; } 100% { border-top-color: #7389AE; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; transform: rotate(360deg) scale(1); } } .spinnerTwo:before { position: absolute; top: 30px; left: 27.5px; content: ""; height: 35px; width: 5px; background-color: #535657; transform-origin: 50% 0%; border-radius: 8px; animation: clockmin 2s linear infinite; } .spinnerTwo:after { position: absolute; content: ""; height: 35px; width: 2px; top: 30px; left: 29px; transform-origin: 50% 0%; background-color: #D1462F; border-radius: 2px; animation: clocksec 0.5s linear infinite; } .spinnerTwo span { position: absolute; top: 10px; left: 27.5px; height: 20px; width: 5px; border-radius: 2px; background: #535657; transform-origin: 50% 100%; animation: clockhour 10s linear infinite; } @keyframes clockhour { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes clockmin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes clocksec { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .spinnerThree { background-color: white; border: 3px solid #e0e0eb; } .spinnerThree span { height: 3px; width: 3px; border-radius: 50%; position: absolute; background: #7389AE; } .spinnerThree > span:nth-child(1) { top: 28px; left: 8px; animation: bounce 2s linear 0s infinite; } .spinnerThree > span:nth-child(2) { top: 28px; left: 14px; animation: bounce 2s linear 0.09s infinite; } .spinnerThree > span:nth-child(3) { top: 28px; left: 20px; animation: bounce 2s linear 0.18s infinite; } .spinnerThree > span:nth-child(4) { top: 28px; left: 26px; animation: bounce 2s linear 0.27s infinite; } .spinnerThree > span:nth-child(5) { top: 28px; left: 32px; animation: bounce 2s linear 0.36s infinite; } .spinnerThree > span:nth-child(6) { top: 28px; left: 38px; animation: bounce 2s linear 0.45s infinite; } .spinnerThree > span:nth-child(7) { top: 28px; left: 44px; animation: bounce 2s linear 0.54s infinite; } .spinnerThree > span:nth-child(8) { top: 28px; left: 50px; animation: bounce 2s linear 0.63s infinite; } @keyframes bounce { 0%, 10%, 100% { top: 28px; transform: scale(1); } 5% { top: 20px; transform: scale(2); } } .spinnerFour { overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); } .spinnerFour > span { height: 60px; width: 60px; position: absolute; border-radius: 50%; transform: scale(0); } .spinnerFour > span:nth-child(1) { top: -2px; left: -11px; background: #b9dcfa; animation: grow 2s linear 0s infinite; } .spinnerFour > span:nth-child(2) { top: 15px; left: 6px; background: #4e9e22; animation: grow 2s linear 0.5s infinite; } .spinnerFour > span:nth-child(3) { top: -3px; left: -8px; background: #1df26c; animation: grow 2s linear 1s infinite; } .spinnerFour > span:nth-child(4) { top: -14px; left: -1px; background: #683e54; animation: grow 2s linear 1.5s infinite; } .spinnerFour > span:nth-child(5) { top: -3px; left: 14px; background: #daf610; animation: grow 2s linear 2s infinite; } .spinnerFour > span:nth-child(6) { top: -10px; left: 7px; background: #cd4902; animation: grow 2s linear 2.5s infinite; } .spinnerFour > span:nth-child(7) { top: 6px; left: 7px; background: #5d9a5d; animation: grow 2s linear 3s infinite; } .spinnerFour > span:nth-child(8) { top: 9px; left: -1px; background: #a7bbef; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0