在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>wgchen</title>
    <link rel="shortcut icon" href="#" />
    <meta name="keywords" content="https://wgchen.blog.csdn.net">
    <meta name="keywords" content="技术文章">
    <meta name="keywords" content="博客">
    <meta name="keywords" content="willem">
    <meta name="keywords" content="ycc">
    <style>
        body {
            display: grid;
            grid-auto-flow: column;
            grid-gap: 8vw;
            place-content: center;
            margin: 0;
            height: 100vh;
            background: #ecf0f4;
        }

        button {
            --i: var(--light, 0);
            --not-i: calc(1 - var(--i));
            --j: var(--press, 0);
            --not-j: calc(1 - var(--j));
            z-index: var(--i);
            border: none;
            width: 2em;
            height: 2em;
            border-radius: 15%;
            transform: scale(calc(1 - var(--j)*.02));
            box-shadow: calc(var(--not-j)*-0.25em) calc(var(--not-j)*-0.25em) 0.25em rgba(252, 252, 252, var(--not-j)), calc(var(--not-j)*0.25em) calc(var(--not-j)*0.25em) 0.25em rgba(210, 218, 230, var(--not-j)), inset calc(var(--j)*0.25em) calc(var(--j)*0.25em) 0.25em rgba(210, 218, 230, var(--j)), inset calc(var(--j)*-0.25em) calc(var(--j)*-0.25em) 0.25em rgba(252, 252, 252, var(--j));
            background: #e8e8e8;
            font-size: 2.5em;
            transition: box-shadow 0.3s, transform 0.3s cubic-bezier(0.2, 4, 1, 3);
            cursor: pointer;
        }

        button::after {
            filter: Contrast(0) Sepia(var(--i)) Hue-Rotate(calc(var(--hue) - 50deg)) Saturate(5) Opacity(calc(var(--i) + .21*var(--not-i))) Drop-Shadow(1px 1px hsla(0, 0%, 100%, var(--not-i)));
            transition: filter 0.3s;
            content: attr(data-ico);
        }

        button:focus {
            outline: none;
        }

        button:hover,
        button:focus {
            --light: 1;
        }

        button:active {
            --press: 1;
        }
    </style>
</head>

<body>

    <button aria-label="heart" data-ico="💖" style="--hue: 344deg"></button>
    <button aria-label="like" data-ico="👍" style="--hue: 247deg"></button>
    <button aria-label="star" data-ico="⭐" style="--hue: 48deg"></button>



</body>

</html>
# javascript # 前端 # html
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

虚拟机安装Debian 12.5.0及其常用软件(2024.7)

avatar 华为开发者空间

Ubuntu下安装GCC编译器

在虚拟机Ubuntu里面安装gcc编译器，首先快捷键alt+ctr+t调出来中端，然后输入sudoapt-getinstallbuild-essential命令，即可进行安装。

avatar 华为开发者空间

人民大学云计算编程的网上评估平台--解题报告 1001-1003

<br />这几天忙着找实习，所以日志耽搁了，现在来补起~~。<br />相信很多人都知道  PKU Online Judge，现在中国人民大学也提供了一个类似的平台，但与北京在线评判系统不一样的是，中国人民大学的这个系统是专门评判mapreduce编程题的。<br />我把链接发出来，大家可以去试着做看看: http://cloudcomputing.ruc.edu.cn/index.jsp<b

avatar 华为开发者空间