效果示例
这种效果起初是在腾讯云的官网上发现的，对这个效果比较好奇，所以就看了一下他的实现。然后自己写个demo记录一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<style>
.item-box {
position: relative;
width: 200px;
height: 80px;
display: flex;
align-items: center;
box-shadow: 0px 4px 8px 1px rgba(57, 58, 55, 0.84);
border-radius: 3px;
justify-content: space-around;
}
.mini-icon {
background-image: url(./images/mini-icon.png);
width: 48px;
height: 48px;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: top;
}
.mini-icon.is-leave {
animation: mini-icon-leave .3s steps(16) forwards;
}
.mini-icon.is-enter {
animation: mini-icon-enter .3s steps(16) forwards;
}
@keyframes mini-icon-leave {
0% {
background-position: 0 -768px
}
to {
background-position: 0 0
}
}
@keyframes mini-icon-enter {
0% {
background-position: 0 0
}
to {
background-position: 0 -768px
}
}
</style>
</head>
<body>
<div class="item-box">
<span class="item-name">小程序</span>
<span class="mini-icon"></span>
</div>
</body>
<script>
const miniIcon = document.querySelector('.mini-icon');
miniIcon.addEventListener('mouseenter', () => {
miniIcon.classList.add('is-enter');
})
miniIcon.addEventListener('mouseleave', () => {
miniIcon.classList.remove('is-enter');
miniIcon.classList.add('is-leave');
})
</script>
</html>
顺便贴一下用到的背景图片
这个效果主要用了三个知识点，animation、@keyframes还有js动态的给dom添加移除类名