css实现icon动画效果

one.dream

已于 2022-10-11 14:20:16 修改

阅读量6.4k

点赞数

分类专栏： CSS 文章标签： css 前端

于 2022-10-11 14:16:12 首次发布

本文链接：https://blog.csdn.net/qq_44472722/article/details/127262606

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

预览

链接

实现方案

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>