赞
踩
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="demo.css" type="css/text"></script> <style> body{ margin: 0px; background-color: black; } .eat-wrap{ margin-top: 100px; width: 200px; height: 200px; /* background-color: black; */ border-radius: 50%; box-shadow:300px 0px 0px -80px white, 450px 0px 0px -80px white, 600px 0px 0px -80px white, 750px 0px 0px -80px white; animation: run 1s infinite; } .eat-wrap::before{ content: ""; display: block; width: 200px; height: 100px; margin-left: 100px; background-color: white; border-radius: 100px 100px 0px 0px; transform: rotate(-30deg); animation: topmove 1s infinite;/*infinite 持续执行动画;animition:执行下面的 @keyframes topmove*/ } .eat-wrap::after{ content: ""; display: block; width: 200px; height: 100px; margin-left: 100px; background-color: white; border-radius: 0px 0px 100px 100px ; transform: rotate(30deg); animation: bottommove 1s infinite; } @keyframes topmove { 0%{ transform: rotate(0deg); } 50%{ transform: rotate(-30deg); } 100%{ transform:rotate(0deg); } } @keyframes bottommove { 0%{ transform: rotate(0deg); } 50%{ transform: rotate(30deg); } 100%{ transform:rotate(0deg); } } @keyframes run { 0% { box-shadow:300px 0px 0px -80px white, 450px 0px 0px -80px white, 600px 0px 0px -80px white, 750px 0px 0px -80px white; } 100%{ box-shadow:15px 0px 0px -80px yellow, 300px 0px 0px -80px green, 450px 0px 0px -80px red, 600px 0px 0px -80px paleturquoise; } } </style> </head> <body> <div class="eat-wrap"> </div> <div> <p style="font-family: Arial, Helvetica, sans-serif;color:whitesmoke;font-size: 200px;">Loading..</p> </div> </body> </html>
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。