网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发 > css

css实现酷炫Flash文字跳动动画效果

2022/11/22 21:39:50

Flash虽然已被淘汰了,但它所实现的一些效果还是非常棒的,今天我们就用css实现一个酷炫的Flash文字跳动的经典动画效果,如下图所示:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <link rel="apple-touch-icon…

        Flash虽然已被淘汰了,但它所实现的一些效果还是非常棒的,今天我们就用css实现一个酷炫的Flash文字跳动的经典动画效果,如下图所示:

2.gif

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="apple-touch-icon" type="image/png"
        href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
    <meta name="apple-mobile-web-app-title" content="CodePen">
    <link rel="shortcut icon" type="image/x-icon"
        href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
    <link rel="mask-icon" type="image/x-icon"
        href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
        color="#111" />
    <title>css实现酷炫Flash文字跳动动画效果</title>
    <style>
        body {
            background-color: #293A4B;
            overflow: hidden;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        body,
        html {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        svg {
            width: 100%;
            height: 100%;
            visibility: hidden;
        }
        #ringGroup circle {
            filter: url(#glow)
        }
    </style>
    <script>
        window.console = window.console || function (t) { };
    </script>
    <script>
        if (document.location.search.match(/type=embed/gi)) {
            window.parent.postMessage("resize", "*");
        }
    </script>
</head>
<body translate="no">
    <svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
        <defs>
            <filter id="glow" x="-100%" y="-100%" width="250%" height="250%">
                <feGaussianBlur stdDeviation="4" result="coloredBlur" />
                <feOffset dx="0" dy="0" result="offsetblur"></feOffset>
                <feFlood id="glowAlpha" flood-color="#293A4B" flood-opacity="0.4"></feFlood>
                <feComposite in2="offsetblur" operator="in"></feComposite>
                <feMerge>
                    <feMergeNode />
                    <feMergeNode in="SourceGraphic"></feMergeNode>
                </feMerge>
            </filter>
            <filter id="shadow" x="-100%" y="-100%" width="250%" height="250%">
                <feOffset in="SourceAlpha" dx="4" dy="4" result="offsetOut"></feOffset>
                <feGaussianBlur stdDeviation="4" in="offsetOut" result="drop" />
                <feBlend in="SourceGraphic" in2="drop" mode="normal" />
            </filter>
            <clipPath id="maskR">
                <rect x="398.03" y="183.39" width="339.72" height="255.77" fill="red" />
            </clipPath>
            <clipPath id="maskL">
                <rect x="62.25" y="183.39" width="335.78" height="255.77" fill="red" />
            </clipPath>
            <g id="believeText" fill="#FFF">
                <path id="dot"
                    d="M397.95,237.54c10.38,0,18.88,7.87,18.88,18.25s-8.5,17.93-18.88,17.93-18.72-7.55-18.72-17.93,8.34-18.25,18.72-18.25Z" />
                <path id="i"
                    d="M420.14,288.36c0,5.98-4.09,17.93-4.09,34.14,0,11.48,3.15,21.71,3.15,29.58,0,4.88-3.78,9.44-12.74,9.44-14,0-25.96-5.82-25.96-11.96s3.62-19.04,3.62-30.68-4.09-17.15-4.09-23.91c0-8.34,16.36-15.42,29.73-15.42,6.29,0,10.38,2.99,10.38,8.81Z" />
                <g id="leftChars" clip-path="url(#maskL)">
                    <g>
                        <path
                            d="M194.24,276.56c0,15.1-9.28,22.65-9.28,23.44,0,.94,19.82,4.88,19.82,25.33s-20.77,37.13-44.36,37.13-37.13-7.87-39.02-11.64c-3.3-6.61-5.82-27.53-5.82-48.93s1.89-41.69,7.24-44.83c6.14-3.62,17.46-6.76,31.46-6.76,26.11,0,39.96,11.17,39.96,26.27Zm-44.36-2.67c-1.57,.79-1.89,9.12-1.89,11.17s.79,3.78,3.78,3.78c5.98,0,11.33-4.41,11.33-10.07,0-3.78-2.05-6.76-6.29-6.76-2.04,0-5.35,.94-6.92,1.89Zm1.1,47.51c0,.63-.16,3.15-.16,5.82,0,2.05,.16,4.09,.31,5.51,.47,2.36,1.89,2.67,4.56,2.67,5.66,0,12.27-3.46,12.27-8.97,0-5.19-4.41-8.18-9.91-8.18-2.83,0-7.08,1.42-7.08,3.15Z" />
                    </g>
                    <g>
                        <path
                            d="M278.56,257.84c3.46,5.35,4.09,10.54,4.09,15.42,0,5.35-2.83,8.34-6.29,8.34s-12.9-1.42-20.45-1.42-11.64,1.1-11.64,5.66c0,3.3,1.57,5.98,4.88,5.98,4.88,0,12.74-2.36,17.62-2.36,4.56,0,7.39,1.73,7.39,11.48,0,10.7-2.67,16.52-6.61,16.52-3.62,0-7.08-.63-11.64-.63-7.39,0-10.7,1.89-10.7,6.61,0,2.83,.79,4.41,6.14,4.41,18.41,0,30.05-7.71,33.35-7.71s5.66,4.88,5.66,13.21c0,11.01-1.26,16.99-5.98,19.35-4.56,2.36-23.28,8.5-43.26,8.5s-24.54-2.2-26.27-6.61c-2.2-5.82-4.88-22.97-4.88-43.58,0-30.21,2.99-47.51,4.56-52.54,1.57-4.88,12.43-8.18,34.92-8.18,15.1,0,24.7,.63,29.1,7.55Z" />
                    </g>
                    <g>
                        <path
                            d="M342.74,256.74c0,3.3-6.14,36.81-6.14,54.9,0,13.06,2.67,15.42,8.34,15.42,13.37,0,21.87-10.54,24.7-10.54,2.52,0,4.88,1.57,4.88,8.18,0,14.95-.94,25.64-15.42,31.15-11.17,4.25-20.14,4.56-29.73,4.56s-23.6-2.04-27.53-10.07c-2.99-5.98-4.72-30.05-4.72-48.45,0-24.54,2.36-40.43,9.28-44.21,8.34-4.56,23.28-7.55,28.63-7.55,4.72,0,7.71,3.15,7.71,6.61Z" />
                    </g>
                </g>
                <g id="rightChars" clip-path="url(#maskR)">
                    <g>
                        <path
                            d="M672.62,257.84c3.46,5.35,4.09,10.54,4.09,15.42,0,5.35-2.83,8.34-6.29,8.34s-12.9-1.42-20.45-1.42-11.64,1.1-11.64,5.66c0,3.3,1.57,5.98,4.88,5.98,4.88,0,12.74-2.36,17.62-2.36,4.56,0,7.39,1.73,7.39,11.48,0,10.7-2.67,16.52-6.61,16.52-3.62,0-7.08-.63-11.64-.63-7.39,0-10.7,1.89-10.7,6.61,0,2.83,.79,4.41,6.14,4.41,18.41,0,30.05-7.71,33.35-7.71s5.66,4.88,5.66,13.21c0,11.01-1.26,16.99-5.98,19.35-4.56,2.36-23.28,8.5-43.26,8.5s-24.54-2.2-26.27-6.61c-2.2-5.82-4.88-22.97-4.88-43.58,0-30.21,2.99-47.51,4.56-52.54,1.57-4.88,12.43-8.18,34.92-8.18,15.1,0,24.7,.63,29.1,7.55Z" />
                    </g>
                    <g>
                        <path
                            d="M600.73,266.02c0,9.6-2.99,34.77-10.7,56.48-7.87,21.87-12.74,28.16-21.55,32.41-8.97,4.25-20.77,5.66-25.8,5.66-6.76,0-14-5.66-19.98-15.73-7.71-12.9-18.41-40.75-18.41-66.7,0-9.44,8.02-13.37,18.56-18.56,8.65-4.25,16.05-4.56,18.25-4.56,2.36,0,5.66,2.04,5.66,6.61s-1.57,31.15-1.57,44.05,3.62,17.78,5.66,17.78c1.89,0,9.6-12.27,9.6-31.94,0-17.15-3.15-22.97-3.15-27.06s25.17-13.53,32.72-13.53,10.7,5.66,10.7,15.1Z" />
                    </g>
                    <g>
                        <path
                            d="M492.34,257.84c3.46,5.35,4.09,10.54,4.09,15.42,0,5.35-2.83,8.34-6.29,8.34s-12.9-1.42-20.45-1.42-11.64,1.1-11.64,5.66c0,3.3,1.57,5.98,4.88,5.98,4.88,0,12.74-2.36,17.62-2.36,4.56,0,7.39,1.73,7.39,11.48,0,10.7-2.67,16.52-6.61,16.52-3.62,0-7.08-.63-11.64-.63-7.39,0-10.7,1.89-10.7,6.61,0,2.83,.79,4.41,6.14,4.41,18.41,0,30.05-7.71,33.35-7.71s5.66,4.88,5.66,13.21c0,11.01-1.26,16.99-5.98,19.35-4.56,2.36-23.28,8.5-43.26,8.5s-24.54-2.2-26.27-6.61c-2.2-5.82-4.88-22.97-4.88-43.58,0-30.21,2.99-47.51,4.56-52.54,1.57-4.88,12.43-8.18,34.92-8.18,15.1,0,24.7,.63,29.1,7.55Z" />
                    </g>
                </g>
            </g>
            <mask id="ringMask">
                <use href="#believeText" />
            </mask>
            <g id="ringGroup">
                <circle cx="398.03" cy="255" r="0" opacity="0" />
                <circle cx="398.03" cy="255" r="0" opacity="0" />
                <circle cx="398.03" cy="255" r="0" opacity="0" />
                <circle cx="398.03" cy="255" r="0" opacity="0" />
                <circle cx="398.03" cy="255" r="0" opacity="0" />
                <circle cx="398.03" cy="255" r="0" opacity="0" />
                <circle cx="398.03" cy="255" r="0" opacity="0" />
                <circle cx="398.03" cy="255" r="0" opacity="0" />
                <circle cx="398.03" cy="255" r="0" opacity="0" />
                <circle cx="398.03" cy="255" r="0" opacity="0" />
            </g>
        </defs>
        <g mask="url(#ringMask)">
            <rect width="100%" height="100%" fill="#577590" />
            <use href="#ringGroup" />
        </g>
    </svg>
    <script
        src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
    <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/ScrubGSAPTimeline_3_1.js'></script>
    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js'></script>
    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomWiggle3.min.js'></script>
    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/EasePack3.min.js'></script>
    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js'></script>
    <script id="rendered-js">
        gsap.config({ trialWarn: false });
        let select = s => document.querySelector(s),
            selectAll = s => document.querySelectorAll(s),
            toArray = s => gsap.utils.toArray(s),
            mainSVG = select('#mainSVG'),
            colorArray = ["#f94144", "#f65a38", "#f3722c", "#f8961e", "#f9af37", "#f9c74f", "#90be6d", "#43aa8b", "#4d908e", "#577590"].reverse(),
            strokeColorArray = ["#f94144", "#f8961e", "#f9c74f", "#90be6d", "#4d908e", "#577590"].reverse();
        let ringEase = CustomEase.create("custom", "M0,0 C0.484,0.274 0.79,0.698 1,1 ");
        let ringRadialEase = CustomEase.create("custom", "M0,0 C0,0.908 0.78,1 1,1 ");
        gsap.set('svg', {
            visibility: 'visible'
        });
        gsap.set('.ring', {
            fill: gsap.utils.wrap(colorArray)
        });
        /* gsap.set('#splashLines path', {
            stroke: gsap.utils.wrap(strokeColorArray),
            drawSVG: '0% 0%'
        }) */
        gsap.set(['#dot', '#i', '#leftChars path', '#rightChars path'], {
            transformOrigin: '50% 100%'
        });
        gsap.set(['#rightChars g', '#leftChars g'], {
            transformOrigin: '50% 50%'
        });
        let tl = gsap.timeline({
            repeat: -1
        });
        tl.
            add('idrop').
            fromTo('#i', {
                y: -380
            },
                {
                    y: 0,
                    duration: 0.13,
                    ease: 'sine.in'
                },
                'idrop').
            fromTo('#i', {
                scaleX: 0.2,
                scaleY: 1.8
            },
                {
                    scaleX: 1,
                    scaleY: 1,
                    duration: 1.4,
                    ease: 'elastic(0.83, 0.3)'
                },
                'idrop').
            add('drop', '-=1').
            fromTo('#dot', {
                y: -300
            },
                {
                    y: 20,
                    duration: 0.13,
                    ease: 'sine.in'
                },
                'drop').
            fromTo('#dot', {
                scaleX: 1.5,
                scaleY: 0.5
            },
                {
                    scaleX: 1,
                    scaleY: 1,
                    duration: 1,
                    ease: 'elastic(0.83, 0.13)'
                },
                'drop').
            to('#i', {
                duration: 0.2,
                scaleX: 1.5,
                scaleY: 0.5,
                ease: 'sine',
                repeat: 1,
                yoyo: true
            },
                'drop+=0.12').
            add('endDotDrop', '-=0.5').
            add('addChars', '-=0.1').
            from('#leftChars g', {
                x: gsap.utils.wrap([350, 250, 150]),
                stagger: 0.06,
                ease: 'expo'
            },
                'addChars').
            from('#leftChars g', {
                duration: 0.25,
                scale: 0.5,
                stagger: 0.06,
                ease: 'sine.in'
            },
                'addChars').
            from('#leftChars path', {
                duration: 1,
                rotation: 'random(0, 90)',
                ease: 'elastic(0.9, 0.53)',
                stagger: 0.06
            },
                'addChars').
            from('#leftChars path', {
                duration: 1.5,
                scaleX: 1.5,
                scaleY: 0.5,
                ease: 'elastic(0.85, 0.3)',
                stagger: 0.1
            },
                'addChars').
            from('#rightChars g', {
                duration: 0.25,
                scale: 0.5,
                stagger: 0.06,
                ease: 'sine.in'
            },
                'addChars').
            from('#rightChars g', {
                x: gsap.utils.wrap([-300, -200, -100]),
                stagger: 0.06,
                ease: 'expo'
            },
                'addChars').
            from('#rightChars path', {
                duration: 1,
                rotation: 'random(-90, 0)',
                ease: 'elastic(0.9, 0.53)',
                stagger: 0.06
            },
                'addChars').
            from('#rightChars path', {
                duration: 1.25,
                scaleX: 1.5,
                scaleY: 0.5,
                ease: 'elastic(0.95, 0.23)',
                stagger: 0.1
            },
                'addChars').
            add('dotEnd').
            to('#dot', {
                duration: 0.2,
                scaleX: 0.8,
                scaleY: 1.3,
                y: -100,
                ease: 'power1.inOut'
            },
                'endDotDrop').
            to('#dot', {
                duration: 0.2,
                y: 0,
                ease: 'power3.in'
            },
                'endDotDrop+=0.2').
            to('#dot', {
                duration: 1,
                scaleX: 1,
                scaleY: 1,
                ease: 'elastic(1, 0.52)'
            },
                'endDotDrop+=0.2').
            to('#i', {
                duration: 1.2,
                scaleX: 1.2,
                scaleY: 0.8,
                ease: 'wiggle({wiggles: 7})'
            },
                'endDotDrop+=0.4').
            to('.ring', {
                duration: 2,
                attr: {
                    r: gsap.utils.distribute({
                        base: 10,
                        amount: 300,
                        from: "end",
                        ease: ringEase
                    })
                },
                stagger: {
                    each: 0.1
                },
                opacity: 1,
                ease: ringRadialEase
            },
                '-=1.7').
            to('.believeText', {
                opacity: 0,
                ease: 'power2.in'
            });
        gsap.globalTimeline.timeScale(0.75);
//ScrubGSAPTimeline(tl)
//# sourceURL=pen.js
    </script>
</body>
</html>

        查看在线实例

        通过以上内容我们知道了css如何实现酷炫Flash文字跳动的动画效果?感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!


相关资讯

  • css实现图片和背景同时滑动的酷炫效果

    我们曾经介绍过很多种图片滑动的效果,今天我们使用css实现一个图片和背景同时滑动的酷炫效果,如下图所示:<html><head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href…

    2022/11/22 21:57:11
  • 设置英文首字母大写的css属性是什么?

    设置CSS text-transform 的属性为capitalize就可以实现英文首字母大写。 定义和用法  text-transform 属性控制文本的大小写。 属性值 值 描 述 none 默认。定义带有小写字…

    2021/7/14 20:35:17
  • 只让页面显示横滚动条,不显示竖滚动条如何实现?

    只让页面显示横滚动条,不显示竖滚动条的方法其实很简单,主要用到body的两个css属性 overflow和 overflow-y,如下所示:body { overflow:scroll; overflow-y:hidden;}

    2021/2/28 21:45:25
  • 网页的滚动条样式可以修改吗?如何修改?

    网页的滚动条样式可以修改的,主要是使用css来控制那如何修改呢?如下代码:<div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="hei…

    2021/2/28 21:15:24
  • css如何实现6张图片均匀排列在一行?

    css部分如下:img{width:120px; height:80px;float:left;margin-right:16px;}.img3{margin-right:0;}html部分如下:<img src="images/001.jpg" /><img src="images/002.jpg" /><img src="images/003.jpg" /><img src=…

    2021/2/28 21:10:01