首页 > 代码库 > 你也会喜欢的CSS3文本动画

你也会喜欢的CSS3文本动画

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body {

            padding: 40px 0;

            font-family: ‘bebas‘, sans-serif;

        }

        body .textcontainer {

            padding: 40px 0;

            text-align: center;

        }

        body .particletext {

            text-align: center;

            font-size: 48px;

            position: relative;

        }

        body .particletext.bubbles > .particle {

            opacity: 0;

            position: absolute;

            background-color: rgba(33, 150, 243, 0.5);

            -webkit-animation: bubbles 3s ease-in infinite;

            animation: bubbles 3s ease-in infinite;

            border-radius: 100%;

        }

        body .particletext.lines > .particle {

            position: absolute;

            background-color: rgba(244, 67, 54, 0.5);

            -webkit-animation: lines 3s linear infinite;

            animation: lines 3s linear infinite;

        }

        body .particletext.confetti > .particle {

            opacity: 0;

            position: absolute;

            -webkit-animation: confetti 3s ease-in infinite;

            animation: confetti 3s ease-in infinite;

        }

        body .particletext.confetti > .particle.c1 {

            background-color: rgba(76, 175, 80, 0.5);

        }

        body .particletext.confetti > .particle.c2 {

            background-color: rgba(156, 39, 176, 0.5);

        }

        body .particletext.fire > .particle {

            position: absolute;

            background-color: rgba(255, 193, 7, 0.5);

            border-radius: 40px;

            border-top-right-radius: 0px;

            -webkit-animation: fires 0.8s linear infinite;

            animation: fires 0.8s linear infinite;

            -webkit-transform: rotate(-45deg);

            transform: rotate(-45deg);

            opacity: 0;

        }

        body .particletext.fire > .particle:before {

            position: absolute;

            content: ‘‘;

            top: 60%;

            left: 40%;

            -webkit-transform: translate(-50%, -50%);

            transform: translate(-50%, -50%);

            width: 50%;

            height: 50%;

            border-radius: 40px;

            border-top-right-radius: 0px;

            background-color: rgba(251, 140, 0, 0.5);

        }

        body .particletext.sunbeams > .particle {

            position: absolute;

            background-color: rgba(253, 216, 53, 0.5);

            -webkit-animation: sunbeams 3s linear infinite;

            animation: sunbeams 3s linear infinite;

        }

        @-webkit-keyframes bubbles {

            0% {

                opacity: 0;

            }

            20% {

                opacity: 1;

                -webkit-transform: translate(0, -20%);

                transform: translate(0, -20%);

            }

            100% {

                opacity: 0;

                -webkit-transform: translate(0, -1000%);

                transform: translate(0, -1000%);

            }

        }

        @keyframes bubbles {

            0% {

                opacity: 0;

            }

            20% {

                opacity: 1;

                -webkit-transform: translate(0, -20%);

                transform: translate(0, -20%);

            }

            100% {

                opacity: 0;

                -webkit-transform: translate(0, -1000%);

                transform: translate(0, -1000%);

            }

        }

        @-webkit-keyframes lines {

            0%, 50%, 100% {

                -webkit-transform: translateY(0%);

                transform: translateY(0%);

            }

            25% {

                -webkit-transform: translateY(100%);

                transform: translateY(100%);

            }

            75% {

                -webkit-transform: translateY(-100%);

                transform: translateY(-100%);

            }

        }

        @keyframes lines {

            0%, 50%, 100% {

                -webkit-transform: translateY(0%);

                transform: translateY(0%);

            }

            25% {

                -webkit-transform: translateY(100%);

                transform: translateY(100%);

            }

            75% {

                -webkit-transform: translateY(-100%);

                transform: translateY(-100%);

            }

        }

        @-webkit-keyframes confetti {

            0% {

                opacity: 0;

                -webkit-transform: translateY(0%) rotate(0deg);

                transform: translateY(0%) rotate(0deg);

            }

            10% {

                opacity: 1;

            }

            35% {

                -webkit-transform: translateY(-800%) rotate(270deg);

                transform: translateY(-800%) rotate(270deg);

            }

            80% {

                opacity: 1;

            }

            100% {

                opacity: 0;

                -webkit-transform: translateY(2000%) rotate(1440deg);

                transform: translateY(2000%) rotate(1440deg);

            }

        }

        @keyframes confetti {

            0% {

                opacity: 0;

                -webkit-transform: translateY(0%) rotate(0deg);

                transform: translateY(0%) rotate(0deg);

            }

            10% {

                opacity: 1;

            }

            35% {

                -webkit-transform: translateY(-800%) rotate(270deg);

                transform: translateY(-800%) rotate(270deg);

            }

            80% {

                opacity: 1;

            }

            100% {

                opacity: 0;

                -webkit-transform: translateY(2000%) rotate(1440deg);

                transform: translateY(2000%) rotate(1440deg);

            }

        }

        @-webkit-keyframes fires {

            0% {

                -webkit-transform: rotate(-70deg) translateY(0%);

                transform: rotate(-70deg) translateY(0%);

            }

            25% {

                -webkit-transform: rotate(-20deg) translateY(-5%);

                transform: rotate(-20deg) translateY(-5%);

                opacity: 1;

            }

            50% {

                -webkit-transform: rotate(-70deg) translateY(-10%);

                transform: rotate(-70deg) translateY(-10%);

            }

            75% {

                -webkit-transform: rotate(-20deg) translateY(-20%);

                transform: rotate(-20deg) translateY(-20%);

            }

            100% {

                -webkit-transform: rotate(-70deg) translateY(-40%);

                transform: rotate(-70deg) translateY(-40%);

                opacity: 1;

            }

        }

        @keyframes fires {

            0% {

                -webkit-transform: rotate(-70deg) translateY(0%);

                transform: rotate(-70deg) translateY(0%);

            }

            25% {

                -webkit-transform: rotate(-20deg) translateY(-5%);

                transform: rotate(-20deg) translateY(-5%);

                opacity: 1;

            }

            50% {

                -webkit-transform: rotate(-70deg) translateY(-10%);

                transform: rotate(-70deg) translateY(-10%);

            }

            75% {

                -webkit-transform: rotate(-20deg) translateY(-20%);

                transform: rotate(-20deg) translateY(-20%);

            }

            100% {

                -webkit-transform: rotate(-70deg) translateY(-40%);

                transform: rotate(-70deg) translateY(-40%);

                opacity: 1;

            }

        }

        @-webkit-keyframes sunbeams {

            0% {

                -webkit-transform: translateY(40%) rotate(0deg);

                transform: translateY(40%) rotate(0deg);

            }

            50% {

                -webkit-transform: translateY(-40%) rotate(180deg);

                transform: translateY(-40%) rotate(180deg);

            }

            100% {

                -webkit-transform: translateY(40%) rotate(360deg);

                transform: translateY(40%) rotate(360deg);

            }

            0%,

            14%,

            17%,

            43%,

            53%,

            71%,

            80%,

            94%,

            100% {

                opacity: 0;

            }

            6%,

            15%,

            24%,

            28%,

            48%,

            55%,

            78%,

            82%,

            99% {

                opacity: 1;

            }

        }

        @keyframes sunbeams {

            0% {

                -webkit-transform: translateY(40%) rotate(0deg);

                transform: translateY(40%) rotate(0deg);

            }

            50% {

                -webkit-transform: translateY(-40%) rotate(180deg);

                transform: translateY(-40%) rotate(180deg);

            }

            100% {

                -webkit-transform: translateY(40%) rotate(360deg);

                transform: translateY(40%) rotate(360deg);

            }

            0%,

            14%,

            17%,

            43%,

            53%,

            71%,

            80%,

            94%,

            100% {

                opacity: 0;

            }

            6%,

            15%,

            24%,

            28%,

            48%,

            55%,

            78%,

            82%,

            99% {

                opacity: 1;

            }

        }

    </style>

</head>

<body>

<script src="http://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>

    <div class="textcontainer">

        <span class="particletext bubbles"><span class="text">Bubbles</span></span>

    </div>

 

    <div class="textcontainer">

        <span class="particletext lines"><span class="text">Lines</span></span>

    </div>

 

    <div class="textcontainer">

        <span class="particletext confetti"><span class="text">Confetti</span></span>

    </div>

 

    <div class="textcontainer">

        <span class="particletext fire"><span class="text">Fire</span></span>

    </div>

 

    <div class="textcontainer">

        <span class="particletext sunbeams"><span class="text">Beams?</span></span>

    </div>

<script>

    var particles = function() {

        var bubbles = function() {

            var density = 100;

            var uppersize = 6;

            var lowersize = 3;

        };

    };

 

    function initparticles() {

        bubbles();

        lines();

        confetti();

        fire();

        sunbeams();

    }

 

    function bubbles() {

        $.each($(".particletext.bubbles"), function() {

            var bubblecount = ($(this).find(".text").width() / 50) * 10;

            for (var i = 0; i <= bubblecount; i++) {

                var size = $.rnd(6, 12);

                $(this).append(‘<span class="particle" style="top:‘ + $.rnd(20, 80) + ‘%; left:‘ + $.rnd(0, 95) + ‘%;width:‘ + size + ‘px; height:‘ + size + ‘px;animation-delay: ‘ + ($.rnd(0, 30) / 10) + ‘s;"></span>‘);

            }

        });

    }

 

    function lines() {

        $.each($(".particletext.lines"), function() {

            var linecount = ($(this).find(".text").width() / 50) * 10;

            for (var i = 0; i <= linecount; i++) {

                $(this).append(‘<span class="particle" style="top:‘ + $.rnd(-30, 50) + ‘%; left:‘ + $.rnd(-10, 110) + ‘%;width:‘ + $.rnd(1, 3) + ‘px; height:‘ + $.rnd(20, 80) + ‘%;animation-delay: -‘ + ($.rnd(0, 30) / 10) + ‘s;"></span>‘);

            }

        });

    }

 

    function confetti() {

        $.each($(".particletext.confetti"), function() {

            var confetticount = ($(this).find(".text").width() / 50) * 10;

            for (var i = 0; i <= confetticount; i++) {

                $(this).append(‘<span class="particle c‘ + $.rnd(1, 2) + ‘" style="top:‘ + $.rnd(10, 50) + ‘%; left:‘ + $.rnd(0, 100) + ‘%;width:‘ + $.rnd(6, 8) + ‘px; height:‘ + $.rnd(3, 4) + ‘px;animation-delay: ‘ + ($.rnd(0, 30) / 10) + ‘s;"></span>‘);

            }

        });

    }

 

    function fire() {

        $.each($(".particletext.fire"), function() {

            var firecount = ($(this).find(".text").width() / 50) * 20;

            for (var i = 0; i <= firecount; i++) {

                var size = $.rnd(8, 12);

                $(this).append(‘<span class="particle" style="top:‘ + $.rnd(40, 70) + ‘%; left:‘ + $.rnd(-10, 100) + ‘%;width:‘ + size + ‘px; height:‘ + size + ‘px;animation-delay: ‘ + ($.rnd(0, 20) / 10) + ‘s;"></span>‘);

            }

        });

    }

 

    function sunbeams() {

        $.each($(".particletext.sunbeams"), function() {

            var linecount = ($(this).find(".text").width() / 50) * 10;

            for (var i = 0; i <= linecount; i++) {

                $(this).append(‘<span class="particle" style="top:‘ + $.rnd(-50, 00) + ‘%; left:‘ + $.rnd(0, 100) + ‘%;width:‘ + $.rnd(1, 3) + ‘px; height:‘ + $.rnd(80, 160) + ‘%;animation-delay: -‘ + ($.rnd(0, 30) / 10) + ‘s;"></span>‘);

            }

        });

    }

 

    jQuery.rnd = function(m, n) {

        m = parseInt(m);

        n = parseInt(n);

        return Math.floor(Math.random() * (n - m + 1)) + m;

    }

 

    initparticles();

</script>

</body>

</html>

需要web前端课程工具和电子书,可以加群120342833

 

你也会喜欢的CSS3文本动画