CSS实现元素hover时背景色拉伸渐变

HTML代码

html 复制代码
<ul>
                            <li>
                                <p><a href="#">Facebook搜索</a></p>
                            </li>
                            <li>
                                <p><a href="#">Instagram搜索</a></p>
                            </li>
                            <li>
                                <p><a href="#">Google搜索</a></p>
                            </li>
                            <li>
                                <p><a href="#">YellowPage搜索</a></p>
                            </li>
                            <li>
                                <p><a href="#">Yelp搜索</a></p>
                            </li>
                            <li>
                                <p><a href="#">WhatsApp搜索</a></p>
                            </li>
                            <li>
                                <p><a href="#">群发消息</a></p>
                            </li>
                        </ul>

CSS代码

css 复制代码
 ul li{
        cursor: pointer;
        width: 45%;
        padding: 30px;
        display: flex;
        margin-bottom: 20px;
        border-radius: 20px;
        box-shadow: 0 10px 10px #ECEFF7;
        transition: all 0.5s;
        background: linear-gradient(to right, transparent 0%, transparent 100%);
        position: relative;
        overflow: hidden;
    }
 ul li::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, transparent 0%, #4095E5 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.5s;
        z-index: 0;
    }
 ul li:hover::before {
        transform: scaleX(1);
    }
 ul li:hover{
        transform: scale(1.05);
        /* background: linear-gradient(to right, transparent 0%, #4095E5 100%); */
    }
 ul li * {
        position: relative;
        z-index: 1;
    }

效果图

相关推荐
qb39 分钟前
vue3.5.18源码-编译-入口
前端·vue.js·架构
小桥风满袖40 分钟前
极简三分钟ES6 - 类与继承
前端·javascript
虫无涯42 分钟前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
子兮曰43 分钟前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
wifi歪f44 分钟前
📦 qiankun微前端接入实战
前端·javascript·面试
小桥风满袖44 分钟前
极简三分钟ES6 - Symbol
前端·javascript
子兮曰1 小时前
🚀Map的20个神操作,90%的开发者浪费了它的潜力!最后的致命缺陷让你少熬3天夜!
前端·javascript·ecmascript 6
NewChapter °1 小时前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app
练习时长两年半的Java练习生(升级中)1 小时前
从0开始学习Java+AI知识点总结-30.前端web开发(JS+Vue+Ajax)
前端·javascript·vue.js·学习·web
vipbic1 小时前
关于Vue打包的遇到模板引擎解析的引号问题
前端·webpack