CSS模仿迅雷主页的按钮

Posted 2021-08-12 wosperry

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS模仿迅雷主页的按钮相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div class="button-test">
            <div>哈哈哈哈</div>
            <div>这是一段描述</div>
            <div>===</div>
            <div>访问网站</div>
        </div>
        <div class="button-test">
            <div>哈哈哈哈</div>
            <div>这是一段描述</div>
            <div>===</div>
            <div>访问网站</div>
        </div>
        <div class="button-test">
            <div>哈哈哈哈</div>
            <div>这是一段描述</div>
            <div>===</div>
            <div>访问网站</div>
        </div>
    </div>
</body>

</html>

<style>
     :root {
        --box-width: 200px;
        --box-button-width: 100px;
    }
    
    html,
    body {
        padding: 0;
        margin: 0;
    }
    
    #app {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 100vh;
        background-image: radial-gradient( circle 732px at -23.9% -25.1%,  rgba(30,39,107,1) 6.1%, rgba(188,104,142,1) 100.2% );
    }
    
    .button-test {
        user-select: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: .3s ease-in-out;
        width: var(--box-width);
        height: var(--box-width);
        margin: 10px;
        border-radius: 10px;
        color: #eee;
        cursor: default;
        background-color: rgba(255, 255, 255, .1);
    }
    
    .button-test:hover {
        transition: .3s ease-in-out;
        backdrop-filter: blur(5px);
        background-color: rgba(255, 255, 255, .2);
    }
    
    .button-test div:nth-child(1) {
        transition: .3s ease-in-out;
        transform: translateY(100%);
        font-size: 2rem;
    }
    
    .button-test div:nth-child(2) {
        opacity: 1;
        transition: .3s ease-in-out;
        font-size: .9rem;
        transform: translateY(300%);
    }
    
    .button-test div:nth-child(3) {
        transition: .3s ease-in-out;
        font-size: 3rem;
        transform: translateY(80%);
    }
    
    .button-test div:nth-child(4) {
        font-size: .7rem;
        border: solid 2px #999;
        padding: 8px 20px;
        text-align: center;
        border-radius: 20px;
        width: var(--box-button-width);
        opacity: 0;
        transform: translateY(100%);
        transition: .3s ease-in-out;
        cursor: pointer;
    }
    
    .button-test:hover div:nth-child(1) {
        transition: .2s ease-in-out;
        transform: translateY(50%);
    }
    
    .button-test:hover div:nth-child(2) {
        transition: .2s ease-in-out;
        opacity: 0;
        transform: translateY(150%);
    }
    
    .button-test:hover div:nth-child(3) {
        transition: .4s ease-in-out;
        opacity: 1;
        transform: translateY(-5%);
    }
    
    .button-test:hover div:nth-child(4) {
        transition: .5s ease-in-out;
        opacity: 1;
        transform: translateY(50%);
    }
</style>

哈哈哈哈

这是一段描述

===

访问网站

哈哈哈哈

这是一段描述

===

访问网站

哈哈哈哈

这是一段描述

===

访问网站