css实现鼠标滑动左下角弹框带动画效果

代码

复制代码
<div className='kuang'></div>

css代码

复制代码
 .kuang {
        height: 500px;
        width: 400px;
        // background-color: #fff;
        position: absolute;
        z-index: 10;
        bottom: 0;
        transform: translateX(-390px)
    }
    .kuang:hover {
       animation: myanimation 3s linear 1;
       animation-fill-mode:forwards;
       background-color: #fff;
    }
    @keyframes myanimation {
        0%{
            transform: translateX(-400px);
        }
        100%{
            transform:translateX(0);
        }
    }

实现效果

相关推荐
云浪4 分钟前
掌握 CSS 倾斜函数
前端·css
ai产品老杨11 分钟前
实现自动化管理、智能控制、运行服务的智慧能源开源了。
前端·javascript·vue.js·前端框架·ecmascript
唐诗13 分钟前
优化 Nextjs 开发的个人博客首页,秒开!
前端·next.js
飞川撸码14 分钟前
web vue 项目 Docker化部署
前端·vue.js·docker·运维开发
默默无闻的白夜17 分钟前
【Vue】初学Vue(setup函数,数据响应式, 脚手架 )
前端·javascript·vue.js
萌萌哒草头将军22 分钟前
⚡⚡⚡Rstack 家族即将迎来新成员 Rstest🚀🚀🚀
前端·javascript·vue.js
江城开朗的豌豆31 分钟前
Proxy:JavaScript中的'变形金刚',让你的对象为所欲为!
前端·javascript·面试
江城开朗的豌豆39 分钟前
JavaScript中的instanceof:你的代码真的认识'自家孩子'吗?
前端·javascript·面试
JinSo41 分钟前
create-easy-editor —— 快速搭建你的可视化编辑器
前端·前端框架·github
Watermelo6171 小时前
【前端实战】如何让用户回到上次阅读的位置?
前端·javascript·性能优化·数据分析·哈希算法·哈希·用户体验