CSS模仿加速球
CSS模仿加速球
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> #tout, html, body { width: 100%; height: 100%; } #tout { position: relative; } #tout:first-child div { display: block; width: 100px; height: 100px; border: 2px solid #000; border-radius: 50%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #tout:first-child>div>div { width: 90px; height: 90px; border: 5px solid #fff; border-radius: 50%; margin: auto; overflow: hidden; } #tout:first-child div div div { width: 110px; height: 110px; margin: auto; top: 360px; background-color: #ddd; border-radius: 0%; border: none; animation-name: anim, color; animation-duration: 5s; animation-timing-function:ease; animation-iteration-count:infinite; animation-direction: alternate; } @keyframes anim{ 100% { top:0 } } /* @keyframes color{ 0% { background-color: green; } 25% { background-color: green; } 50% { background-color: red; } 75% { background-color: yellow; } 100% { background-color: blue; } } */ </style> </head> <body> <div id="tout"> <div> <div> <div> </div> </div> </div> </div> </body> </html>
.
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18