CSS学习(一)——制作新年贺卡

最新推荐文章于 2022-06-08 21:50:38 发布

cRack_cLick

最新推荐文章于 2022-06-08 21:50:38 发布

阅读量1.3k

点赞数 3

分类专栏： css学习文章标签： css

本文链接：https://blog.csdn.net/SkelleBest/article/details/112118922

版权

css学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果如下：

我也是正在学习中，此特效没有太高级的代码语法，只是transform的应用

源码如下：

<!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>