前端小案例彙總（附上原碼）

一.交叉動畫效果

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交叉動畫實現</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .wrapper {
            background-color: #222;
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .dot {
            width: 2em;
            height: 2em;
            margin: 1em;
            border-radius: 50%;
            background-color: red;
            position: relative;
        }

        .dot::before {
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: inherit;
            border-radius: inherit;
            content: "";
            animation: wave 2s ease-out infinite;
        }

        /* .dot:nth-of-type(1)::before {
            animation-delay: .2s;
        }

        .dot:nth-of-type(2)::before {
            animation-delay: .4s;
        } */

        /* .dot:nth-of-type(3)::before {
            animation-delay: .6s;
        }

        .dot:nth-of-type(4)::before {
            animation-delay: .8s;
        }

        .dot:nth-of-type(5)::before {
            animation-delay: 1s;
        } */

        /* .dot:nth-of-type(1) {
            background-color: green;
        }

        .dot:nth-of-type(2) {
            background-color: yellow;
        }

        .dot:nth-of-type(3) {
            background-color: blue;
        }

        .dot:nth-of-type(4) {
            background-color: yellowgreen;
        }

        .dot:nth-of-type(5) {
            background-color: white;
        } */

        @keyframes wave {
            50% {
                transform: scale(2.5);
            }

            100% {
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function()
        {
            var $dot=$(".dot");
            for(var i=0;i<$dot.length;i++)
            {
                $(`.dot:nth-of-type(${i+1})`).css({
                    "background-color":`rgb(${random(0,255)},${random(0,255)},${random(0,255)})`
                })
                // $(`.dot:nth-of-type(${i+1})::before`).css({
                //     "animation-delay":i*0.2+"s"
                // })
                $("head").append(
                    `<style>
                        .dot:nth-of-type(${i+1})::before
                        {
                            animation-delay:${i*0.2}s
                        }
                    </style>`
                )
            }
        })
        function random(min,max)
        {
            return Math.floor(Math.random()*(max-min)+min)
        }
    </script>
</body>

</html>

二.閃光按鈕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>閃亮按鈕</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            height: 100vh;
            background: #000;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .btn{
            padding: 1rem 3rem;
            font-size: 1rem;
            line-height: 1.5;
            color: #fff;
            --hue:190;
            background: hsl(var(--hue), 100%, 40%);
            border: 1px solid hsl(var(--hue), 100%, 40%);
            text-transform: uppercase;
        }
        .btn:hover{
            background: hsl(var(--hue), 100%, 20%);
            /* --hue:150; */
        }
        .btn.btn-ghost{
            background: transparent;
        }
        .btn.btn-shine{
            position: relative;
            overflow: hidden;
        }
        .btn.btn-shine::before{
            position: absolute;
            width: 100%;
            height: 100%;
            top:0;
            left:0;
            background: linear-gradient(120deg,transparent,
            hsla(var(--hue), 100%, 40%,0.5),transparent);
            content: "";
            transform: translateX(-100%);
            transition: 0.8s;

        }
        .btn.btn-shine:hover::before{
            transform: translateX(100%);
        }
        .btn.btn-shine:hover{
            box-shadow: 0 0 20px 10px hsla(var(--hue), 100%, 40%,0.5);
        }
        .btn.btn-success
        {
            --hue:350;
        }



    </style>
</head>
<body>
    <button class="btn btn-ghost btn-shine btn-success">hover me</button>
</body>
</html>

三.下雪場景

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>想和你一起去看雪</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            height: 100vh;
            background: radial-gradient(ellipse at bottom,
                    #1b2735 0, #090a0f 100%);
            filter: drop-shadow(0 0 10px white);
            position: relative;
        }

        .snow {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
        }
        .mywords
        {
            position: fixed;
            left: 50%;
            top:50%;
            transform: translate(-50%,-50%);
            color: #fff;
            font-size: 1.5em;
            line-height: 2em;
            font-weight: 500;
            display: flex;
            flex-wrap: wrap;
           
        }
        .mywords  span{
            animation: jumpin 0.5s ease-out both;
            
        }
        @keyframes jumpin {
            from{
                transform: translateY(-20%);
                opacity: 0;
            }
            to{
                transform: translateY(0);
                opacity: 1;
            }
        }
       
    </style>
</head>

<body>
    <p class="mywords">
       餘生我只想和你看雪看星星看月亮，從詩詞歌賦談到人生理想。
    </p>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function () {
            var words=$(".mywords").text().split("");
            $(".mywords").empty();
            words.forEach((w,i)=>{
                $(`<span>${w}</span>`).css({
                    "animation-delay": 0.1*i+'s'
                }).appendTo($(".mywords"));
            });
            for(var i=0;i<200;i++)
            {
                var x=Math.random()*100;
                var y=Math.random()*100;
                var scale=Math.random();
                var opacity=Math.random();
                var t1=Math.random()*20+10;
                var t2=Math.random()*30;

                var o=Math.random()*20-10;
                var x1=x+o;
                var x2=x+o/2;

                $(`<style> @keyframes fall${i} {
            ${y}%{
                transform: translate(${x1}vw, ${y}vh) scale(${scale});
            }
            to{
                transform: translate(${x2}vw,100vh) scale(${scale});
            }
        }
    </style>`).appendTo($("head"));
                $('<div class="snow"></div>')
                    .css({
                        "transform": `translate(${x}vw, -10px) scale(${scale})`,
                        "opacity": opacity,
                        "animation": `fall${i} ${t1}s -${t2}s linear infinite`
                    })
                    .appendTo($("body")).end()
                    
            }
        })
    </script>
</body>

</html>

四.紅色閃光月亮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>紅色的月亮</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            background: black;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .moon
        {
            width: 8em;
            height: 8em;
            border-radius: 50%;
            background: black;
            box-shadow: inset 0.5em -0.5em crimson;
            position: relative;
            animation: move 2s linear infinite;
        }
        .moon::before,.moon::after
        {
            position: absolute;
            width: 100%;
            height: 100%;
            background: inherit;
            box-shadow: inherit;
            border-radius: inherit;
            content: ""; 
        }
        .moon::before{
            filter: blur(5px);
        }
        .moon::after{
            filter: blur(10px);
        }
        @keyframes move {
            to{
                transform: rotate(1turn);
            }
        }

    </style>
</head>
<body>
    <div class="moon"></div>
</body>
</html>

五.文字效果

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background-color: #0f0f0f;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .mywords {
            color: #fff;
            font-size: 1.5em;
            line-height: 1.8em;
            margin: 0 1em;

        }

        .mywords span {
            animation: lightin 0.8s both;
            
        }

        @keyframes lightin {
            from {
                opacity: 0;
            }

            65% {
                opacity: 1;
                text-shadow: 0 0 30px #fff;
            }

            75% {
                opacity: 1;
            }

            to {
                opacity: 0.7;
            }
        }
    </style>
</head>

<body>
    <p class="mywords">
        不管前方的路有多苦，只要走的方向正確，不管多麼崎嶇不平，都比站在原地更接近幸福。
    </p>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function()
        {
            var words=$(".mywords").text().split("");
            $(".mywords").empty();
            words.forEach((w,i)=>{
                $(`<span>${w}</span>`)
                .css({
                    "animation-delay": 0.05*i+'s'
                })
                .appendTo($(".mywords"));
            })
        })
    </script>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字遮罩效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;

        }

        body {
            background-color: #0f0f0f;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .mywords {
            color:transparent;
            font-size: 1.5em;
            line-height: 1.8em;
            position: relative;
            animation: fontcolor 2s 1.6s forwards;
        }

        @keyframes fontcolor {
            to{
                color: #fff;
            }
        }

        .mywords.from {
            margin: 1em 0;
        }
        .mywords::before{
            content: "";
            position: absolute;
            left: 0;
            top:0;
            width: 100%;
            height: 100%;
            background-color: cyan;
            transform: scaleX(0);
            transform-origin:left ;
            animation: move 2s cubic-bezier(0.75,0,0,1) forwards;
        }
        .mywords.from::before{
            background-color: orange;
            animation-delay: 2s;
            /* animation: move 2s 2s cubic-bezier(0.75,0,0,1) forwards; */
        }
        .mywords.from
        {
            animation-delay: 3.2s;
        }
        @keyframes move {
            50%{
                transform-origin: left;
                transform: scaleX(1);
            }
            50.1%
            {
                transform-origin: right;
            }
            100%
            {
                transform-origin: right;
                transform: scaleX(0);
            }
        }
    </style>
</head>

<body>
    <p class="mywords">我不知道將去何方，但我已在路上</p>
    <p class="mywords from">千與千尋</p>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字蒙版效果實現</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            height: 100vh;
            position: relative;
        }
        img,h1{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        img{
            object-fit: cover;
        }
        h1{
            font-size: 20vw;
            text-align: center;
            line-height: 100vh;
            mix-blend-mode: screen;
            background-color: #fff;
        }


    </style>
</head>
<body>
    <img src="bg.gif" alt="">
    <h1>花未眠</h1>
</body>
</html>

前端小案例彙總（附上原碼）

一.交叉動畫效果

二.閃光按鈕

三.下雪場景

四.紅色閃光月亮

五.文字效果

詐騙（殺豬盤）網站進行滲透測試

Python 潮流週刊#50：我最喜歡的 Python 3.13 新特性！

web前端開發筆記整理（五）

LIUNX自測基礎命令測驗題目+考覈點（三）

Js_Data對象，定時器,腳本化css

jQuery實現tab欄切換（附上代碼）

web前端開發筆記整理（四）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結