css实现卡片突出焦点功能


html

typescript 复制代码
<body>
    <div class="container">

        <ul>
            <li>
                <div class="img-box">
                    <img src="https://snail-staging.oss-cn-shanghai.aliyuncs.com/upload-pc/school-3/care/picker/20220830/20220830145148_39j3.jpg" />
                </div>

                <div class="content">
                    <h3 class="rank">
                        <small>#</small>1
                    </h3>

                    <h4>join</h4>

                    <p>测试</p>
                </div>
            </li>

            <li>
                <div class="img-box">
                    <img src="https://snail-staging.oss-cn-shanghai.aliyuncs.com/upload-pc/school-3/care/picker/20220830/20220830145412_zm5c.jpg" />
                </div>

                <div class="content">
                    <h3 class="rank">
                        <small>#</small>2
                    </h3>

                    <h4>hill</h4>

                    <p>测试2</p>
                </div>
            </li>

            <li>
                <div class="img-box">
                    <img src="https://snail-staging.oss-cn-shanghai.aliyuncs.com/upload-pc/school-3/care/picker/20220830/20220830145653_ns73.jpg" />
                </div>

                <div class="content">
                    <h3 class="rank">
                        <small>#</small>3
                    </h3>

                    <h4>baby</h4>

                    <p>测试3</p>
                </div>
            </li>
        </ul>
    </div>
</body>

css

typescript 复制代码
  <style>
        /*google-fonts*/
        @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul li {
            list-style: none;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        body {
            font-family: 'Poppins', sans-serif;
            color: #333;

            min-height: 100vh;
            background-color: #f5f5f5;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            padding: 20px;
        }

        .container h2 {
            font-size: 1.75em;
            margin-bottom: 20px;
            text-align: center;
        }

        ul {
            min-width: 300px;
            /* min-width: 350px; */
        }

        ul:hover li {
            filter: blur(5px);
            opacity: 0.3;
        }

        ul li {
            position: relative;

            display: flex;
            column-gap: 10px;
            padding: 10px;
            margin-block: 10px;
            overflow: hidden;

            background-color: #fff;
            border-radius: 10px;

            cursor: pointer;
            transition: 0.5s;
        }

        ul li:hover {
            box-shadow: -10px 20px 35px rgba(0, 0, 0, 0.15);
            transform: scale(1.15);
            filter: blur(0);
            opacity: 1;
        }

        ul li .img-box {
            width: 60px;
            height: 60px;

            border-radius: 10px;
            overflow: hidden;
        }

        ul li .content {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        ul li .content .rank {
            position: absolute;
            right: -50px;

            color: #03a9f4;
            font-size: 2em;

            transition: right 0.5s;
        }

        ul li .content .rank small {
            font-weight: 500;
            opacity: 0.3;
        }

        ul li:hover .content .rank {
            right: 20px;
        }

        ul li .content h4 {
            font-weight: 600;
            line-height: 1.2em;
        }

        ul li .content p {
            font-size: 0.75em;
        }
    </style>
相关推荐
meichaoWen10 分钟前
【CSS】CSS 面试知多少
前端·css
我血条子呢16 分钟前
【预览PDF】前端预览pdf
前端·pdf·状态模式
90后的晨仔31 分钟前
报错 找不到“node”的类型定义文件。 程序包含该文件是因为: 在 compilerOptions 中指定的类型库 "node" 的入口点 。
前端
90后的晨仔1 小时前
5分钟搭建你的第一个TypeScript项目
前端·typescript
专注前端30年1 小时前
Vue2 中 v-if 与 v-show 深度对比及实战指南
开发语言·前端·vue
90后的晨仔1 小时前
TypeScript是什么?为什么前端必须学它?
前端
用户47949283569151 小时前
从 58MB 到 2.6MB:我是如何将 React 官网性能提升 95% 的
前端·javascript
该用户已不存在1 小时前
7个让全栈开发效率起飞的 Bun 工作流
前端·javascript·后端
芙蓉王真的好12 小时前
Angular CDK 响应式工具指南:从基础到自适应布局应用
前端·javascript·angular.js
Boale_H2 小时前
如何获取npm的认证令牌token
前端·npm·node.js