纯js和纯css制作鼠标移入移除滑动动画

最新推荐文章于 2025-05-31 16:23:29 发布

yufengxiaojiang3

最新推荐文章于 2025-05-31 16:23:29 发布

阅读量2.7k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：原生ECMAScript

本文链接：https://blog.youkuaiyun.com/yufengxiaojiang3/article/details/96914194

纯js和纯css制作鼠标移入移除滑动动画

你好，欢迎来到我的笔记本里。这里，我将分享我的心得，还有，感谢你的欣赏。

简单介绍用到的知识点

定位：position：absolute ，绝对定位，是相对于脱离文档流的父级定位标签进行定位，包括（absolute、relative），如果上一级没有找到，就继续一层一层的往上找，直到找到定位的标签，如果都没有，默认为body；
定位：position: relative,相对定位，相对于自身位置定位，常用于自身微小的位置定位；
动画：animation-duration:0.5s，设定动画的周期时间为0.5s,这个必须增加，不然就没有滑动的视觉效果；
透明度：opacity: 0.5;,设定透明度为0.5 = 50%；
关键帧动画：@keyframes + 动画名{ 0%{} 50%{} 100% }，设置该帧动画时间的时刻的动画效果；
js鼠标事件：onmouseenter || onmouseleave，绑定鼠标的移入和移除事件，不冒泡版。

动画设计思路

本来想偷懒在网上找纯js和纯css的滑动代码，结果半天全是jQuery版，在非正常情况下就是挂羊头卖狗肉，骗取浏览量。遂思考解决。
我使用的是animation+鼠标绑定事件，很好理解。
分别给鼠标移入和移除添加动画效果就可以了,特别注意top的值。来，上干货。

HTML部分

    <div class="lgLi">
            <div class="lgLiXuK">故里家居</div>
    </div>

css样式部分

.lgLiXuK{
   
   
    position: absolute;
    width:168px;
    height: 40px;
    top: 45px;
    text-align: center;
    line-height: 40px;
    background: orange;
    /* 
    position: absolute;  首先对目标标签进行绝对定位，
    添加好看的样式，无形中添加美观
     text-align: center;  文本字体 水平 居中
     line-height: 40px;   文本字体 垂直 居中 ，这里是相对于本标签高度，一般100%大小才处于中间
    添加背景颜色为了方便查看效果
     */
}
.lgLi{
   
   
    position: relative;
    width:168px;
    height:150px;
    background-color: antiquewhite;
    /* 
     position: relative;  添加相对定位
    */
}
.lgLiXuK001{
   
   
    top: 0px;
    animation-name:lgLiXuKX;
    animation-duration:0.5s;
    animation-timing-function: linear;
    /* 
    animation-name:lgLiXuKX;  动画设定的名称，这是为了后续的 @keyframes + 动画名 准备
    animation-duration:0.5s;  动画的周期时间
     animation-timing-function: linear;  规定动画的速度曲线 ： 匀速
    */
}
@keyframes lgLiXuKX{
   
   
    0%{
   
   
        opacity: 0;
        top: