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;
    }

效果图

相关推荐
xvmingjiang2 分钟前
Vue 3 中监听多个数据变化的几种方法
前端·javascript·vue.js
我有一只臭臭3 分钟前
ES5 和 ES6 类的实现
前端·javascript·es6
excel4 分钟前
Three.js 实现高分辨率地球边界可视化
前端
LaoZhangAI17 分钟前
Google Gemini AI图片编辑完全指南:50+中英对照提示词与批量处理教程(2025年9月)
前端·后端
用户114818678948421 分钟前
从零搭建 Vue3 + Nest.js 实时通信项目:4 种方案(短轮询 / 长轮询 / SSE/WebSocket)
前端·后端
LaoZhangAI22 分钟前
Google Gemini Nano与Banana AI完整部署指南:2025年轻量级AI解决方案
前端·后端
Giant10023 分钟前
0 基础也能懂的 Flex 布局教程:3 步搞定网页排版
css
用户114818678948426 分钟前
基于 Webpack Module Federation 的 Vue 微前端实践
前端
怪可爱的地球人27 分钟前
Pinia状态管理有哪些常用API?
前端
小高00728 分钟前
🤔函数柯里化:化繁为简的艺术与实践
前端·javascript·面试