前端小案例汇总(附上原码)

来源:周偏偏偏 发布时间:2020-05-12 11:09:06 阅读量:800

一.交叉动画效果



<!DOCTYPE html>

<html>


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

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></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>

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


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

       余生我只想和你看雪看星星看月亮,从诗词歌赋谈到人生理想。

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

<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></div>

</body>

</html>


五.文字效果



<!DOCTYPE html>

<html>


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

        不管前方的路有多苦,只要走的方向正确,不管多么崎岖不平,都比站在原地更接近幸福。

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


<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>我不知道将去何方,但我已在路上</p>

    <p class="mywords from">千与千寻</p>

</body>


</html>





标签: PHP
分享:
评论:
你还没有登录,请先