Flash虽然已被淘汰了，但它所实现的一些效果还是非常棒的，今天我们就用css实现一个酷炫的Flash文字跳动的经典动画效果，如下图所示：
<!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)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！
