<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{/*在div中设置动画效果名为"dh",动画时间为20s,无限执行,正反交替，速度先快后慢*/ animation: dh 20s infinite alternate ease; /*设置定位方式为绝对定位*/ position: absolute; } @keyframes dh{ /*在初始状态中要求盒子是宽为200px,高为200px,背景颜色为蓝色的正方形*/ 0%{ width: 200px;200px;background-color: blue; margin: 0px 0px;} /*在25%时间的时候,盒子向右移动500px,变成直径为150px,背景颜色为红色的圆*/ 25%{width: 150px;height: 150px;border-radius: 50%;background-color: red;margin:0 500px;} /*在50%时间的时候,盒子向下移动500px,产生灰色阴影*/ 50%{width: 150px;height: 150px;border-radius: 50%;background-color: red; margin:500px 500px;box-shadow: 10px 10px gray;} /*在75%时间的时候,盒子向左移动500px,变成正方形，同时颜色变为橘色*/ 75%{width: 150px;height: 150px;;background-color: orange;margin:500px 0px;} /*结束时变回原来的蓝色正方形*/ 100%{width: 150px;height: 150px;background-color: blue; } } </style> </head> <body> <!-- 在body中设置一个div--> <div ></div> </body> </html>
