css3实现spirit精灵动画

猫玖鱼柒网络科技

于 2023-05-06 12:04:49 发布

阅读量201

点赞数

文章标签： css3 动画 css

本文链接：https://blog.csdn.net/qq_63573498/article/details/130523934

版权

效果展示

1.演示地址：腾讯云产业智变·云启未来 - 腾讯

2.图片演示：spirit精灵动画

完整代码

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 spirit精灵动画</title>
    <style>
        .spirit_icon {
            width: 60px;
            height: 60px;
            background: url('@/assets/images/ani-hot.png') no-repeat 0 0;
            background-size: 100% auto;
            display: block;
        }

        .spirit_icon:hover {
            animation: spirit_icon 0.6s steps(24) forwards;
        }

        .spirit_icon:not(:hover) {
            animation: spirit_icon_reverse 0.5s steps(24) forwards;
        }

        @keyframes spirit_icon {
            from {
                background-position-y: 0;
            }

            to {
                background-position-y: -1440px;
            }
        }

        @keyframes spirit_icon_reverse {
            from {
                background-position-y: -1440px;
            }

            to {
                background-position-y: 0;
            }
        }
    </style>
</head>
<body>
    <i class="spirit_icon"></i>
</body>
</html>

注意：

animation: spirit_icon_reverse 0.5s steps(24) forwards;中的0.5s为动画持续时间，24位关键帧个数减一
background-position-y: -1440px;中的-1440px为单个图片大小（60px）乘以24
我是用的图片是竖图，如果你的图片是横图，按需更改