主要CSS3样式代码如下:
#tan{ /*宽度*/ width: 100px; /*高度*/ height: 100px; /*设置背景颜色*/ background-color: red; /*画一个圆形*/ border-radius: 50%; /*使用绝对定位*/ position: absolute; top: 300px; left: 500px; /*让小球从上到下运动 */ animation: tiao 900ms ease-in-out infinite alternate; } #ying{ width: 50px; height: 25px; position: absolute; top: 560px; left: 550px; border-radius:50% ; background-color: #C3C3C3; /*阴影小球X轴倾斜度数*/ transform: translate(0px) rotateX(70deg); /*阴影小球运动*/ animation: bian 900ms ease-in-out infinite alternate; } @keyframes bian { from{ roate(1.0) } to{transform: scale(1.2)} } @keyframes tiao { from{ top: 400px; } to{ top: 450px; } }
HTML样式如下:
<div id="tan"></div> <div id="ying"></div>