gsap+mo实现新年快乐文字文本动画代码
代码语言:html
所属分类:动画
代码描述:gsap+mo实现新年快乐文字文本动画代码
代码标签: gsap mo 新年 快乐 文字 文本 动画 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Fredoka+One&family=Poiret+One&family=Ultra&display=swap"); * { box-sizing: border-box; margin: 0; font-family: "Fredoka One", cursive; } html { height: 100%; --bg: #fe5e5e; --color: #2d3a51; --body: #2d3a51; } body { height: 100%; background-color: var(--body); display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; } h2 { text-align: center; position: relative; font-size: 76px; --t: 1; color: #f7ecc8; } h2 span:nth-of-type(2n) { color: #c8f7c9; } h2::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleX(var(--t)); background-color: var(--body); transform-origin: left; } h2:nth-of-type(2)::after { transform-origin: right; } .confetti { width: 50px; height: 50px; border-radius: 50rem; background-color: #1b263a; } .number { display: flex; justify-content: center; color: var(--color); width: 500px; text-align: center; margin: 0 auto; position: relative; z-index: 100; font-size: 80px; } .number span { font-family: "Poiret One", cursive; } .three { margin-left: 10px; width: 80px; display: flex; flex-direction: column; justify-content: center; } .three-half { --d: 9px; --l: 0; --o: 0; height: 32px; top: 15%; left: 100%; position: absolute; border-radius: 50rem; width: 64px; background-color: #e7dd4b; } .three-half.end { position: relative; width: 32px; transform: none !important; border-top-right-radius: 50rem; border-bottom-right-radius: 50rem; border-bottom-left-radius: 0; border-top-left-radius: 0; right: 0 !important; } .three-half.end::after { opacity: 1; } .three-half.end:nth-of-type(2) { margin-top: -4px; } .three-half:nth-of-type(2) { margin-top: 0px; } .three-half::after { content: ""; position: absolute; opacity: var(--o); height: calc(100% - var(--d)); width: calc(100% - var(--d) / 2); left: var(--l); background-color: var(--body); border-radius: inherit; top: calc(50% - (100% - var(--d)) / 2); } </style> </head> <body > <div> <h2><span>H</span><span>a</span><span>p</span><span>p</span><span>y</span></h2> <h2><span>N</span><span>e</span><span>w</span><span> </span><span>Y</span><span>e</span><span>a</span><span>r</span></h2> </.........完整代码请登录后点击上方下载按钮下载查看
网友评论0