gsap实现文字飘动动画效果
代码语言:html
所属分类:动画
代码描述:gsap实现文字飘动动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:900&display=swap'> <style> :root { --size: 400px; --word-length: 6; --animation-duration: 2800ms; --animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); --animation-iteration-count: infinite; --font-size: 8rem; --background: #afafaf; --shadow-color: #9a9a9a; --icon-size: 16px; --icon-animation-duration: 1800ms; --icon-animation-iteration-count: infinite; --icon-animation-timing-function: ease; } * { box-sizing: border-box; margin: 0; padding: 0; } body { width: 100%; height: 100vh; background-color: var(--background); display: flex; justify-content: center; align-items: center; overflow: hidden; } .icons { display: none; } .container { position: relative; width: var(--size); height: var(--size); } .container .text-container, .container .shadow-container { position: relative; width: 100%; height: 100%; display: grid; place-items: center; } .container .text { position: absolute; height: 100%; width: 60%; display: flex; flex-direction: column; justify-content: center; font-size: var(--font-size); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0