<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css预载动画效果</title> <style> /*第一种开始*/ #preloader-1 { position: relative; } #preloader-1 span { position: absolute; border: 8px solid #fff; border-top: 8px solid transparent; border-radius: 999px; } #preloader-1 span:nth-child(1) { width: 80px; height: 80px; animation: spin-1 2s infinite linear; } #preloader-1 span:nth-child(2) { top: 20px; left: 20px; width: 40px; height: 40px; animation: spin-2 1s infinite linear; } @keyframes spin-1 { 0% { transform: rotate(360deg); opacity: 1.0; } 50% { transform: rotate(180deg); opacity: 0.5; } 100% { transform: rotate(0deg); opacity: 0; } } @keyframes spin-2 { 0% { transform: rotate(0deg); opacity: 0.5; } 50% { transform: rotate(180deg); opacity: 1; } 100% { transform: rotate(360deg); opacity: 0.5; } } /*第一种结束*/ /*第二种开始*/ #preloader-2 { position: relative; margin-left: 200px; } #preloader-2 span { position: absolute; width: 30px; height: 30px; background: #fff; border-radius: 999px; } #preloader-2 span:nth-child(1) { animation: cross-1 1.5s infinite linear; } #preloader-2 span:nth-child(2) { animation: cross-2 1.5s infinite linear; } @keyframes cross-1 { 0% { transform: translateX(0); opacity: 0.5; } 50% { transform: translateX(80px); opacity: 1; } 100% { transform: translateX(0); opacity: 0.5; } } @keyframes cross-2 { 0% { transform: translateX(80px); opacity: 0.5; } 50% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(80px); opacity: 0.5; } } /*第二种结束*/ /*第三种开始*/ #preloader-3 { position: relative; width: 80px; height: 80px; border: 4px solid rgba(255, 255, 255, .25); border-radius: 999px; margin-left: 400px; } #preloader-3 span { position: absolute; width: 80px; height: 80px; border: 4px solid transparent; border-top: 4px solid #8BC34A; border-radius: 999px; top: -4px; left: -4px; animation: rotate 1s infinite linear; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /*第三种结束*/ /*第四重开始*/ #preloader-4 { position: relative; margin-left: 600px; } #preloader-4 span { position: absolute; width: 16px; height: 16px; border-radius: 999px; background: #00bc12; animation: bounce 1s infinite linear; } #preloader-4 span:nth-child(1) { left: 0; animation-delay: 0s; } #preloader-4 span:nth-child(2) { left: 20px; animation-delay: 0.25s; } #preloader-4 span:nth-child(3) { left: 40px; animation-delay: 0.5s; } #preloader-4 span:nth-child(4) { left: 60px; animation-delay: 0.75s; } #preloader-4 span:nth-child(5) { left: 80px; animation-delay: 1.0s; } @keyframes bounce { 0% { transform: translateY(0px); opacity: 0.5; } 50% { transform: translateY(-30px); opacity: 1.0; } 100% { transform: translateY(0px); opacity: 0.5; } } /*第四种结束*/ /*第五种开始*/ #preloader-5 { position: relative; margin-left: 800px; } #preloader-5 span { position: absolute; width: 50px; height: 50px; border: 5px solid #00bc12; border-radius: 999px; opacity: 0; animation: radar 2s infinite linear; } #preloader-5 span:nth-child(1) { animation-delay: 0s; } #preloader-5 span:nth-child(2) { animation-delay: 0.66s; } #preloader-5 span:nth-child(3) { animation-delay: 1.33s; } @keyframes radar { 0% { transform: scale(0); opacity: 0; } 25% { transform: scale(0); opacity: 0.5; } 50% { transform: scale(1); opacity: 1.0; } 75% { transform: scale(1.5); opacity: 0.5; } 100% { transform: scale(2); opacity: 0; } } /*第五种结束*/ </style> </head> <body style="background: #ffb83c;"> <div id="preloader-1"> <span></span> <span></span> </div> <div id="preloader-2"> <span></span> <span></span> </div> <div id="preloader-3"> <span></span> </div> <div id="preloader-4"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div id="preloader-5"> <span></span> <span></span> <span></span> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>n帧动画</title> <style type="text/css"> body { background: #000; } .load { font-size: 33px; width: 1em; height: 1em; border-radius: 50%; position: relative; text-indent: -8888em; /*box-shadow: 3em 2em 0 1.5em #FFF,6em 2em 0 0 #FFF,9em 2em 0 -0.01em #FFF;*/ /*background: #8C0044;*/ animation: load-effect 0.99s infinite linear; } @keyframes load-effect { 0% { box-shadow: 3em 2em 0 1em #fff, 6em 2em 0 0.5em #fff, 9em 2em 0 0 #fff, 12em 2em 0 -0.5em #fff; } 25% { box-shadow: 3em 2em 0 0.5em #fff, 6em 2em 0 0 #fff, 9em 2em 0 -0.5em #fff, 12em 2em 0 1em #fff; } 50% { box-shadow: 3em 2em 0 0 #fff, 6em 2em 0 -0.5em #fff, 9em 2em 0 1em #fff, 12em 2em 0 0.5em #fff; } 75% { box-shadow: 3em 2em 0 -0.5em #fff, 6em 2em 0 1em #fff, 9em 2em 0 0.5em #fff, 12em 2em 0 0 #fff; } 100% { box-shadow: 3em 2em 0 1em #fff, 6em 2em 0 0.5em #fff, 9em 2em 0 0 #fff, 12em 2em 0 -0.5em #fff; } } </style> </head> <body> <div class="load"></div> </body> </html>
