欢迎使用CSDN-markdown编辑器

来源：互联网发布：js点击radio 编辑：程序博客网时间：2024/06/05 15:21
<!DOCTYPE HTML><html>    <head>        <title>动画</title>        <meta http-equiv="content-type" content="text/html;charset=utf-8" />        <style>            div            {                border:1px solid black;                width:200px;                height:100px;                position:relative;            }            div img            {                position:absolute;                            }            #step_2,#step_3            {               visibility:hidden;               z-index:10;            }            /*定义动画*/            @keyframes jump              {                from   { left:5px; top:0px; }                10%  { left:15px; top:15px; }                15%  { left:15px; top:35px; }                20%  { left:15px; top:55px; }                25%  { left:15px; top:75px; }                30%  { left:20px; top:85px; }                35%  { left:20px; top:75px; }                40%  { left:20px; top:55px; }                45%  { left:20px; top:35px; }                50%  { left:30px; top:25px; }                55%  { left:30px; top:35px; }                60%  { left:40px; top:25px;transform:scale(0.5); }                70%  { left:40px; top:40px; transform:scale(0.4);}                80%  { left:40px; top:50px;transform:scale(0.3); }                90%  { left:50px; top:70px;transform:scale(0.2); }                to { left:50px; top:35px;transform:scale(0.1);  }            }            @keyframes image_show              {                from   { left:40px; top:25px;visibility:visible;opacity:0.2;transform:scale(0.5);}                50%   { opacity:0.5;}                70% {left:40px; top:25px;visibility:visible;opacity:1;transform:scale(1);}                to {left:40px; top:25px;visibility:visible;opacity:0;}            }            @keyframes image_end              {                from   { left:40px; top:25px;visibility:visible;opacity:0.2;}                50%   { left:40px; top:25px;opacity:0.5;}                to {left:40px; top:25px;visibility:visible;z-index:20;opacity:1;}            }            /*触发动画*/            img            {                animation:jump 2s;                animation-fill-mode : forwards;            }            #step_2            {                animation:image_show 1s linear 2s;                animation-fill-mode : forwards;            }            #step_3            {                animation:image_end 1s linear 3s;                animation-fill-mode : forwards;            }        </style>    </head>    <body>        <div>            <img src="images/cic.png" />            <img id="step_2" src="images/sf.png" />            <img id="step_3" src="images/red.png" />         </div>    </body></html>
0 0