CSS基础-30CSS动画-动画

来源：互联网发布：机器人仿真软件dami 编辑：程序博客网时间：2024/06/05 05:29
<!DOCTYPE html><!--CSS动画-动画--><html><head lang="en"><meta charset="UTF-8"><title></title><link href="css09.css" type="text/css" rel="stylesheet"></head><body><div>动画效果。。。。。。</div></body></html>
css:
div {    width: 100px;    height: 100px;    background-color: #b3d4fc;    /*使用相对布局*/    position: relative;    /*动画名称anim 时间5s*/    /*infinite alternate反复执行*/    animation: anim 5s infinite alternate;    /*支持 chrome safari浏览器*/    /*infinite alternate反复执行*/    -webkit-animation: anim 5s infinite alternate;}@keyframes anim {    0% {        background-color: #ffff00;        left: 0px;        top: 0px    }    25% {        background-color: aqua;        left: 100px;        top: 0px    }    75% {        background-color: blueviolet;        left: 200px;        top: 0px    }    100% {        background-color: brown;        left: 300px;        top: 0px    }}/*支持 chrome safari浏览器*/@-webkit-keyframes anim {    0% {        background-color: #ffff00;        left: 0px;        top: 0px    }    25% {        background-color: aqua;        left: 100px;        top: 0px    }    75% {        background-color: blueviolet;        left: 200px;        top: 0px    }    100% {        background-color: brown;        left: 300px;        top: 0px    }}
0 0