纯CSS画个新年贺卡

作者: 黑猫小白 | 来源:发表于2021-08-04 09:13 被阅读0次

纯CSS画个新年贺卡
开始画新年贺卡了
web前端特效演示合集
新年贺卡
新年贺卡
新年贺卡
新年贺卡
新年贺卡
新年贺卡
新年贺卡

本文亦发布于个人的CSDN

效果展示

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cRack</title>
</head>
<body>
    <ul>
        <li>
            <span data="H">H</span>
            <span data="A">A</span>
            <span data="P">P</span>
            <span data="P">P</span>
            <span data="Y">Y</span>
        </li>
        <li>
            <span data="N">N</span>
            <span data="E">E</span>
            <span data="W">W</span>
        </li>
        <li>
            <span data="Y">Y</span>
            <span data="E">E</span>
            <span data="A">A</span>
            <span data="R">R</span>
        </li>
    </ul>
</body>
</html>

<style>
    * {
        padding: 0;
        margin: 0;
    }

    html {
        height: 100%;
    }

    body {
        background-color: brown;
    }

    ul {
        list-style: none;
        padding-top: 100px;
    }

    ul > li {
        font-size: 0;
        text-align: center;
    }

    ul > li > span {
        display: inline-block;
        /* border: 1px solid #000; */
        width: 200px;
        height: 200px;
        font-size: 200px;
        line-height: 200px;
        text-align: center;
        font-weight: bold;
        position: relative;
    }

    ul > li > span::before, ul > li > span::after {
        content: attr(data);
        display: inline-block;
        width: 200px;
        height: 200px;
        position: absolute;
        top: 0;
        left: 0;
    }

    ul > li > span::before{
        color: rgb(0, 0, 0, 0.2);

        transform: skew(5deg) translateX(10px);
        transition: .2s;
    }

    ul > li > span::after{
        color: brown;
        text-shadow: 0 -2px 5px rgb(219, 104, 104);
        transform-origin: 100% 0 0;
        transform: rotateX(20deg);
        transition: .2s;
    }

    ul > li > span:hover::before {
        transform: skew(20deg) translateX(25px) scale(1, 1.1) translateY(10px)
    }

    ul > li > span:hover::after{
        color: rgb(199, 72, 72);
        transform: rotateX(48deg) translateY(5px)
    }
</style>