图标鼠标移入移出动态效果
效果示例
这种效果起初是在腾讯云的官网上发现的，对这个效果比较好奇，所以就看了一下他的实现。然后自己写个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添加移除类名
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix