旋转的方块

来源：互联网发布：网络词凉凉是什么意思编辑：程序博客网时间：2024/05/20 20:05

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>会旋转</title>    </head>    <style media="screen">        .demo{            width: 100px;            height: 100px;            background: rgb(135, 219, 18);            /*声明动画：名字，持续时间，循环次数，播放方式，播放之前或之后的变化是否呈现（是否恢复动画之前的状态）*/            animation-name: ani1;            animation-duration: 2s;            animation-iteration-count: infinite;            animation-timing-function: cubic-bezier();            animation-fill-mode: forwards;        }        /*定义动画*/        @keyframes ani1 {            /*开始状态*/            0%{                transform: translateX(0) rotate(0);            }            /*结束状态*/            100%{                transform: translateX(900px) rotate(720deg);            }        }    </style>    <body>        <div class="box">            <div class="demo"></div>        </div>    </body></html>

0 0