<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title></title> <style> .circle{ margin: 0 auto; width: 200px; height: 200px; opacity: 0.7; display: block; background-image: radial-gradient(circle at 120px 80px,#5cabff ,#000); /* 径向渐变 */ border-radius: 50%; /* 对球体进行初始化 */ /*box-shadow: -3px -3px 3px #000;*/ -webkit-animation:move 2s ease-in-out infinite reverse; } .circle_shadow{ /* 阴影配合球体运动，看起来更立体 */ margin: 500px auto; width: 200px; height: 5px; background-color: #ccc; border-radius: 50%; -webkit-animation:shadow 2s ease-in-out infinite; } @-webkit-keyframes move{ 0%{ -webkit-transform:translateY(0px); } 50%{ -webkit-transform:translateY(500px); } 100%{ -webkit-transform:translateY(0px); } } @-webkit-keyframes shadow{ 0%{width:50px;} 25%{width:125px;} 50%{width:200px;} 25%{width:125px;} 100%{width:50px;} } </style> </head> <body> <div class="box"> <div class="circle"> </div> <div class="circle_shadow"></div> </div> </body> </html>
效果图