http://www.indexstargroup.com/isgWeb/index.html <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <title>一个css动画</title> <!-- http://www.indexstargroup.com/isgWeb/index.html --> <style type="text/css"> body{padding-top: 200px;background: rgb(0, 131, 255);} :root { --background-gradient: linear-gradient(to bottom right, #00c6ff 0%, #0072ff 100%); --container-gradient: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.001) 0%, rgba(0, 0, 0, 0.4) 50%); --shadow: 0 0 60px 0px rgba(0, 0, 0, 0.3); --anim-speed: 1.2s; --anim-spin-duration: 2.4s; /* Can't use calc here, Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=956573 */ } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes pulse { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } body, .spinner, .spinner-dial { display: flex; justify-content: center; align-items: center; } .spinner { position: relative; width: 300px; height: 300px; border-radius: 50%; background: var(--container-gradient); box-shadow: var(--shadow); animation: pulse var(--anim-speed) infinite alternate; } .spinner-dial { width: 78%; height: 78%; border-radius: 50%; animation: pulse var(--anim-speed) infinite alternate; animation-delay: calc(var(--anim-speed) / 4); } .spinner-dial::after { content: ''; width: 100%; height: 100%; background: var(--background-gradient); border-radius: 50%; animation: rotate var(--anim-spin-duration) infinite linear; } .spinner-nub { display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; width: 55%; height: 55%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--container-gradient); background-size: 120%; background-position: center; } .spinner-nub::after { content: ''; width: 40%; height: 40%; border-radius: 50%; background-color: rgba(255, 255, 255, 0.8); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7); animation: pulse var(--anim-speed) infinite alternate; animation-delay: calc(var(--anim-speed) / 4); } </style> </head> <body> <div class="spinner"> <div class="spinner-dial"> </div> <div class="spinner-nub"> </div> </div> </body> <!-- <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> --> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 一个css动画 喜欢 (0)or分享 (0)
