你也会喜欢的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>
Bubbles
Lines
Confetti
Fire
Beams?
<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,或者扫码

enter image description here

收藏 0分享浏览 305
1年前
跟帖
暂无
说几句
广告位 点击查看投放指南

我的收藏