jquery+css实现文字冒泡冒烟粒子动画代码
代码语言:html
所属分类:粒子
代码描述:jquery+css实现文字冒泡冒烟粒子动画代码
代码标签: jquery css 文字 冒泡 冒烟 粒子 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @font-face { font-family: 'bebas'; src: url('//repo.bfw.wiki/bfwrepo/fonts/bebas/bebas-webfont.eot'); src: url('//repo.bfw.wiki/bfwrepo/fonts/bebas/bebas-webfont.eot?#iefix') format('embedded-opentype'), url('//repo.bfw.wiki/bfwrepo/fonts/bebas/bebas-webfont.woff2') format('woff2'), url('//repo.bfw.wiki/bfwrepo/fonts/bebas/bebas-webfont.woff') format('woff'), url('//repo.bfw.wiki/bfwrepo/fonts/bebas/bebas-webfont.ttf') format('truetype'), url('//repo.bfw.wiki/bfwrepo/fonts/bebas/bebas-webfont.svg#bebasregular') format('svg'); font-weight: normal; font-style: normal; } body { padding: 40px 0; font-family: "bebas", sans-serif; background-color: #fff; } 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.hearts > .particle { opacity: 0; position: absolute; background-color: #cc2a5d; -webkit-animation: hearts 3s ease-in infinite; animation: hearts 3s ease-in infinite; } body .particletext.hearts > .particle:before, body .particletext.hearts > .particle:after { position: absolute; content: ""; border-radius: 100px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #cc2a5d; } body .particletext.hearts > .particle:before { transform: translateX(-50%); } body .particletext.hearts > .particle:after { transform: translateY(-50%); } 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; transform: rotate(-45deg); opacity: 0; } body .particletext.fire > .particle:before { position: absolute; content: ""; top: 60%; left: 40%; 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; transform: translate(0, -20%); } 100% { opacity: 0; transform: translate(0, -1000%); } } @keyframes bubbles { 0% { opacity: 0; } 20% { opacity: 1; transform: translate(0, -20%); } 100% { opacity: 0; transform: translate(0, -1000%); } } @-webkit-keyframes hearts { 0% { opacity: 0; transform: translate(0, 0%) rotate(45deg); } 20% { opacity: 0.8; transform: translate(0, -20%) rotate(45deg); } 100% { opacity: 0; transform: translate(0, -1000%) rotate(45deg); } } @keyframes hearts { 0% { opacity: 0; transform: translate(0, 0%) rotate(45deg); } 20% { opacity: 0.8; transform: translate(0, -20%) rotate(45deg); } 100% { opacity: 0; transform: translate(0, -1000%) rotate(45deg); } } @-webkit-keyframes lines { 0%, 50%, 100% { transform: translateY(0%); } 25% { transform: translateY(100%); } 75% { transform: translateY(-100%); } } @keyframes lines { 0%, 50%, 100% { transform: translateY(0%); } 25% { transform: translateY(100%); } 75% { transform: translateY(-100%); } } @-webkit-keyframes confetti { 0% { opacity: 0; transform: translateY(0%) rotate(0deg); } 10% { opacity: 1; } 35% { transform: translateY(-800%) rotate(270deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(2000%) rotate(1440deg); } } @keyframes confetti { 0% { opacity: 0; transform: translateY(0%) rotate(0deg); } 10% { opacity: 1; } 35% { transform: translateY(-800%) rotate(270deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(2000%) rotate(1440deg); } } @-webkit-keyframes fires { 0% { transform: rotate(-70deg) translateY(0%); } 25% { transform: rotate(-20deg) translateY(-5%); opacity: 1; } 50% { transform: rotate(-70deg) translateY(-10%); } 75% { transform: rotate(-20deg) translateY(-20%); } 100% { t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0