day05

linux-hzh

于 2025-05-29 11:22:50 发布

阅读量289

点赞数 2

分类专栏： HTML&CSS每日一练文章标签： css3 前端 html

本文链接：https://blog.csdn.net/m0_73431159/article/details/148306563

版权

HTML&CSS每日一练专栏收录该内容

8 篇文章

订阅专栏

这就是今天要实现的效果图（颜色提取推荐使用snipaste）

在这里插入图片描述

代码（仅供参考，不喜勿喷，可以在评论区展示作品）

<html>

<head>

    <script src="//at.alicdn.com/t/c/font_4930922_q7xa56cbs2b.js"></script>

    <style>

        /* Write your CSS code here */

        body {

            background-color: rgb(240, 137, 177);

            display: flex;

        }

        .outer {

            margin: auto;

            width: 180px;

            height: 340px;

            background-color: white;

            border-radius: 10px;

            padding: 30px;

            transition-property: all;

            transition-duration: 1s;

        }

        .outer:hover {

            transform: scale(1.1);

        }

        .title {

            font-size: 15px;

            margin-top: 0px;

        }

        .item1 {

            height: 50px;

            font-size: 10px;

            display: flex;

            padding-top: 5px;

            padding-bottom: 5px;

            box-sizing: border-box;

            transition-property: all;

            transition-duration: 1s;

            border-radius: 5px;

        }

        .item1:hover {

            transform: scale(1.1);

            border: 1px solid skyblue;

            cursor: pointer;

        }

        .icon {

            width: 40px;

            border-radius: 20px;

            border: 1px solid black;

        }

        .content {

            margin: 0px;

            margin-left: 10px;

            opacity: 0.8;

        }
        
        button {

            margin-top: 20px;

            width: 180px;

            height: 45px;

            color: white;

            background-color: rgb(232, 109, 203);

            background-image: linear-gradient(to right bottom, rgb(232, 109, 203), rgb(254, 105, 163));

            border-color: transparent;

            border-radius: 5px;

            box-shadow: 0px 5px 10px 1px gray;

            transition: all;

            transition-duration: 1s;

        }

        button:hover {

            transform: scale(1.1);

        }

    </style>

</head>

<body>

    <div class="outer">

        <p class="title">24 birthdays today</p>

        <div class="item1">

            <svg class="icon" aria-hidden="true">

                <use xlink:href="#icon-user-full"></use>

            </svg>

            <p class="content">

                <strong>Bertie Yates</strong>

                <br>

                29 years

            </p>

        </div>

        <div class="item1">

            <svg class="icon" aria-hidden="true">

                <use xlink:href="#icon-user-full"></use>

            </svg>

            <p class="content">

                <strong>Bertie Yates</strong>

                <br>

                29 years

            </p>

        </div>

        <div class="item1">

            <svg class="icon" aria-hidden="true">

                <use xlink:href="#icon-user-full"></use>

            </svg>

            <p class="content">

                <strong>Bertie Yates</strong>

                <br>

                29 years

            </p>

        </div>

        <div class="item1">

            <svg class="icon" aria-hidden="true">

                <use xlink:href="#icon-user-full"></use>

            </svg>

            <p class="content">

                <strong>Bertie Yates</strong>

                <br>

                29 years

            </p>

        </div>

        <div class="item1">

            <svg class="icon" aria-hidden="true">

                <use xlink:href="#icon-user-full"></use>

            </svg>

            <p class="content">

                <strong>Bertie Yates</strong>

                <br>

                29 years

            </p>

        </div>

        <button>View all</button>

    </div>

</body>

</html>