css实现icon动画效果

Posted on 2023-01-11

预览

实现方案

ui将动画拆成n张图拼在一起
使用background-position属性控制变化
animation属性 steps(n) 将动画拆成n关键帧

上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         @keyframes entery {
            0% {
              background-position: 0 0;
            }
            to {
              background-position: 0 -4500px;
            }
          }
          @keyframes leave {
            0% {
              background-position: 0 -4500px;
            }
          
            100% {
              background-position: 0 0;
            }
          }
        .div{
            width: 150px;
            height: 150px;
            border: 1px solid red;
            background-image: url(http://tva1.sinaimg.cn/large/0088t8Tlly1h71bmadw9rj308c76ce81.jpg);
            background-size: 150px;
            background-position: center 0;
            animation: leave 0.4s steps(15) forwards;
        }
        .div:hover{
            animation: entery 0.4s steps(15) forwards;
        }
    </style>
</head>
<body>
    <div class="div"></div>
</body>
</html>