前端每日挑战の总汇

最新推荐文章于 2025-03-07 18:32:50 发布

原创最新推荐文章于 2025-03-07 18:32:50 发布 · 257 阅读

0 ·

CC 4.0 BY-SA版权

每日挑战学习专栏收录该内容

11 篇文章

订阅专栏

前端每日挑战の总汇

- 内容摘要
- 代码

内容摘要

写了很多天前端纯css画的一些东西，已经算是熟练了很多了，因为每次都重新编辑再发布比较麻烦，所以后面每天练习的内容就总汇在这里做一个记录。有另外学习到的新东西再另外提及。

代码

按钮悬停效果（用处还是比较大的吧个人认为）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮悬停效果</title>
</head>
<body>
    <nav>
        <ul>
            <li>home</li>
            <li>products</li>
            <li>services</li>
            <li>contact</li>
        </ul>
    </nav>
</body>
<style>
    body{
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: lightyellow;
    }
    nav li{
        width: 8em;
        height: 2em;
        font-size: 25px;
        text-align: center;
        line-height: 2em;
        font-family: sans-serif;
        text-transform: capitalize;
        position: relative;
        cursor: pointer;
        list-style: none;
    }
    nav li::before,
    nav li::after{
        content: "";
        position: absolute;
        width: 0.6em;
        height: 0.6em;
        background-color: gainsboro;
        border-radius: 50%;
    }
    nav li::before{
        top:calc(50% - 0.6em /2);
        left: 0;
    }
    nav li::after{
        bottom: calc(50% - 0.6em / 2);
        right: 0;
    }
    /*鼠标悬停效果*/
    nav li:hover::before,
    nav li:hover::after{
        width: 100%;
        height: 100%;
        border-radius:  0;
        color: white;
        background-color: dodgerblue;
    }

    nav li:hover:before{
        z-index: -1;
        top: 0;
    }
    nav li:hover::after{
        z-index: -2;
        bottom: -0.4em;
        right: -0.4em;
        filter:brightness(0.8);
    }
    nav li{
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s ;
        -ms-transition: 0.5s ;
        -o-transition: 0.5s ;
        transition: 0.5s ;
        margin: 0.8em;
    }
    nav li::before,
    nav li::after{
        -webkit-transition: 0.5s cubic-bezier(0.5, -0.5, 0.25, 1.5);
        -moz-transition: 0.5s cubic-bezier(0.5, -0.5, 0.25, 1.5);
        -ms-transition: 0.5s cubic-bezier(0.5, -0.5, 0.25, 1.5);
        -o-transition: 0.5s cubic-bezier(0.5, -0.5, 0.25, 1.5);
        transition: 0.5s cubic-bezier(0.5, -0.5, 0.25, 1.5);
    }
</style>
</html>

小松鼠邮票

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小松鼠邮票</title>
</head>
<body>
    <div class="stamp">
        <div class="squirrel">
            <div class="ear"></div>
            <div class="head"></div>
            <div class="body"></div>
            <div class="tail-start"></div>
            <div class="tail-end"></div>
            <div class="leg"></div>
            <div class="foot"></div>
        </div>
        <p class="text">
            <span class="title">Squirrel</span>
            <span class="author">comehope</span>
            <span class="face-value">200</span>
        </p>
    </div>
</body>
<style>
    body{
        margin:0;
        height: 100vh;
        display:flex;
        align-items: center;
        justify-content: center;
        background-color: teal;
    }
    .stamp{
        position:relative;
        width: 45em;
        height: 63em;
        font-size: 6px;
        padding: 5em;
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items:center;
        justify-content: center;
    }
    .stamp::before,.stamp::after{
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        /*设置了两个background，radial-gradient为径向渐变*/
        background: radial-gradient(circle,teal 50%,transparent 50%),
        radial-gradient(circle,teal 50%,transparent 50%);
        -webkit-background-size: 3.5em 3.5em;
        background-size: 3.5em 3.5em;
    }
    .stamp::before{
        top: 1.5em;
        /*两个background分别显示在相应的边角*/
        background-repeat:repeat-y;
        background-position: -4% 0 , 104% 0;
    }
    .stamp::after {
        left: 1.5em;
        background-repeat: repeat-x;
        background-position: 0 -3%, 0 103%;
    }

    .squirrel{
        display: grid;
        grid-template-columns: 11.5em 7em 15.5em 10.5em;
        grid-template-rows:13em 5em 11.5em 22.5em;
        background-color: silver;
        padding: 2em;
        margin-top: -2em;
    }
    .head{
        grid-column: 1;
        grid-row: 3;
        background-color: chocolate;
        border-bottom-left-radius: 100%;
        /*径向渐变画眼镜*/
        background-image: radial-gradient(circle at 58% 22%,black 1.4em,transparent 1.4em   );
    }
    .ear{
        grid-column: 2;
        grid-row: 2;
        width: 5em;
        background-color: bisque;
        border-bottom-right-radius: 100%;
    }
    .body{
        /* start-line/end-line */
        grid-column: 2/4;
        grid-row: 4;
        background-color: chocolate;
        border-top-right-radius: 100%;
        position: relative;
        overflow: hidden;
    }
    .body::before{
        content: "";
        position: absolute;
        width: 100%;
        height: 50%;
        /* box-shadow : h-shadow v-shadow blur color*/
        box-shadow: 2em -2em 4em rgba(0,0,0,0.3);
        bottom: 0;
        --w: calc((7em + 15.5em)/2);
        border-top-left-radius: var(--w);
        border-top-right-radius: var(--w);
    }
    .foot{
        grid-column: 1;
        grid-row: 4;
        height: 4em;
        width: 8em;
        background-color: saddlebrown;
        justify-self:end;
        align-self: end;
        border-radius: 4em 4em 0 0;
        filter:brightness(0.8);
    }
    .tail-start{
        grid-column: 4;
        grid-row: 4;
        --h: calc(22.5em - 1.5em);
        height: var(--h);
        background-color: bisque;
        align-self: end;
        -webkit-border-radius: 0 var(--h) var(--h) 0;
        -moz-border-radius: 0 var(--h) var(--h) 0;
        border-radius: 0 var(--h) var(--h) 0;
    }
    .tail-end{
        grid-column: 3;
        grid-row: 1;
        --h: calc(13em + 5em + 11.5em + 1.5em);
        height: var(--h);
        background-color: chocolate;
        border-radius: var(--h) 0 0 var(--h);
    }
    .text {
        position: relative;
        width: calc(100% + 2em * 2);
        height: 6em;
        font-family: sans-serif;
    }

    .text .title {
        position: absolute;
        font-size: 6em;
        font-weight: bold;
        color: darkslategray;
    }
    .text .author {
        position: absolute;
        font-size: 3em;
        bottom: -1.2em;
        color: dimgray;
    }
    .text .face-value {
        position: absolute;
        font-size: 14em;
        right: 0;
        line-height: 0.9em;
        color: darkcyan;
    }
</style>
</html>

透视悬停按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>透视悬停按钮</title>
</head>
<body>
    <ul>
        <li>home</li>
        <li>products</li>
        <li>services</li>
        <li>contact</li>
    </ul>
</body>
<style>
    body{
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: cornsilk;
    }
    ul{
        padding: 0;
        list-style-type:none;
    }
    ul li{
        box-sizing:border-box;
        width: 15em;
        height: 3em;
        font-size: 20px;
        border-radius: 0.5em;
        margin: 0.5em;
        box-shadow: 0 0 1em rgba(0,0,0,0.2);
    }
    ul li:nth-child(odd){
        background: linear-gradient(to right,rgba(0,0,0,0.8) ,transparent );
    }
    ul li:nth-child(even) {
        background: linear-gradient(to left, rgba(0,0,0,0.8), transparent);
    }
    ul li{
        color: white;
        font-family: sans-serif;
        text-transform: capitalize;
        line-height: 3em;
        -webkit-transition: 0.3s ease;
        -moz-transition: 0.3s ease;
        -ms-transition: 0.3s ease;
        -o-transition: 0.3s ease;
        transition: 0.3s ease;
        cursor: pointer;
    }
    ul li:nth-child(odd){
        text-align: left;
        padding-left: 10%;
    }
    ul li:nth-child(even){
        text-align: right;
        padding-right: 10%;
    }
    ul li:nth-child(odd){
        transform: perspective(500px) rotateY(45deg);
    }
    ul li:nth-child(even){
        transform: perspective(500px) rotateY(-45deg);
    }
    ul li:nth-child(odd):hover{
        transform: perspective(200px) rotateY(45deg);
        padding-left: 5%;
    }
    ul li:nth-child(even):hover{
        transform: perspective(200px) rotateY(-45deg);
        padding-right: 5%;
    }
</style>
</html>

淡入动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡入动画</title>
</head>
<body>
    <div class="container">
        <span>h</span>
        <span>a</span>
        <span>p</span>
        <span>p</span>
        <span>y</span>
        <span>&nbsp;</span>
        <span>h</span>
        <span>o</span>
        <span>l</span>
        <span>i</span>
        <span>d</span>
        <span>a</span>
        <span>y</span>
    </div>
</body>
    <style>
        body{
            margin: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(pink,white,pink);
        }
        .container span{
            display: inline-block;
            color: purple;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 40px;
            animation:sideSlide 4s forwards infinite;
            -webkit-transform: translateX(-100vw) scale(0);
            -moz-transform: translateX(-100vw) scale(0);
            -ms-transform: translateX(-100vw) scale(0);
            -o-transform: translateX(-100vw) scale(0);
            transform: translateX(-100vw) scale(0);
            filter: opacity(0);
            animation-delay: calc((var(--n) - 1) * 0.05s);
        }
        @keyframes sideSlide {
            15%,20%{
                transform: translateX(0.5em) scale(1);
                color: purple;
            }
            24%{
                transform: translateX(0) scale(1.2);
                color: cyan;
            }
            25%,75%{
                transform: translateX(0) scale(1);
                filter: opacity(1);
                color: purple;
            }
            90%,100%{
                transform: translateX(100vw) scale(0);
                filter: opacity(0);
            }
        }
        .container span:nth-child(1) { --n: 1; }
        .container span:nth-child(2) { --n: 2; }
        .container span:nth-child(3) { --n: 3; }
        .container span:nth-child(4) { --n: 4; }
        .container span:nth-child(5) { --n: 5; }
        .container span:nth-child(6) { --n: 6; }
        .container span:nth-child(7) { --n: 7; }
        .container span:nth-child(8) { --n: 8; }
        .container span:nth-child(9) { --n: 9; }
        .container span:nth-child(10) { --n: 10; }
        .container span:nth-child(11) { --n: 11; }
        .container span:nth-child(12) { --n: 12; }
        .container span:nth-child(13) { --n: 13; }
        .container span:nth-child(14) { --n: 14; }
    </style>
</html>```
给女神让路

让路动画

```