网页动画效果

最新推荐文章于 2024-04-12 05:23:09 发布

一码叠一码

最新推荐文章于 2024-04-12 05:23:09 发布

阅读量87

点赞数

文章标签： html servlet 前端

本文链接：https://blog.csdn.net/m0_73413688/article/details/126698953

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>动画</title>
       <style>
           /* 定义动画 */
           /* 关键帧：自定义名称 */
           @keyframes move {
               from {
                   /* 开始的状态 */
                   transform: translate(0,0);
               }
               to {
                   /* 结束的状态 */
                   transform: translate(600px,0);
               }
           }

           @keyframes move2 {
               /* 多组 */
               0%{
                   transform: translate(0,0) scale(1);
               }
               50%{
                   transform: translate(300px,300px) scale(1.5);
               }
               100%{
                   transform: translate(600px,0px) scale(0.5);
               }
           }

           img{
               width: 100px;
               height: 100px;
               border-radius: 50%;
               /* 调用动画 */
               /* 无限循环 infinite */
               /* 是否反向 alternate*/
               /* animation: move 0.3s 1s linear infinite alternate; */
               animation: move2 2s linear infinite;
           }
       </style>
   </head>
   <body>
       <img src="img/tu.png" alt="">
   </body>
</html>