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

效果图

相关推荐
努力只为躺平几秒前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
李大玄2 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵3 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom
蓝倾8 分钟前
京东批量获取商品SKU操作指南
前端·后端·api
JSLove15 分钟前
常见 npm 报错问题
前端·npm
sunbyte15 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
爱学习的茄子17 分钟前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试
知性的小mahua20 分钟前
vue3+canvas实现摄像头ROI区域标记
前端
嘗_36 分钟前
暑期前端训练day5
前端
uncleTom66642 分钟前
前端布局利器:rem 适配全面解析
前端