基于scene实现类似抖音说字效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Scene.js examples kinetic typing animation</title> <style> @import url('https://fonts.googleapis.com/css?family=Raleway:900&display=swap'); html, body { position: relative; height: 100%; font-family: 'Raleway', sans-serif; font-size: 20px; margin: 0; padding: 0; } * { box-sizing: border-box; } .wrapper { position: absolute; width: 300px; height: 300px; top: 50%; left: 50%; transform: translate(-50%, -50%) translateY(20px) scale(1.5); overflow: hidden; } @media screen and (max-width: 600px) { .wrapper { transform: translate(-50%, -50%) scale(1); } } .container { position: absolute; width: 300px; height: 300px; } [data-typing] { position: absolute; top: 0; /* border: 1px solid #f55; */ transform-origin: 0% 0%; font-size: 25px; margin: 0; padding: 0; top: 100px; line-height: 1; color: #333; } [data-typing="i"] { top: 0; left: 50px; font-size: 90px; height: 70px; line-height: 70px; } [data-typing="frontend"] { top: 3px; left: 80px; font-size: 27px; letter-spacing: 1px; } [data-typing="engineer"] { top: 30px; left: 80px; font-size: 40px; letter-spacing: 1px; } [data-typing="with"] { top: 74px; left: 265px; font-size: 36px; transform: rotate(90deg); background: #333; color: #fff; padding: 0px 4px; } [data-typing="javascript"] { top: 74px; left: 229px; transform: rotate(90deg); font-size: 35px; } [data-typing="typescript"] { top: 72px; right: 110px; font-size: 25px; } [data-typing="css"] { top: 97px; right: 110px; font-size: 40px; } [data-typing="nodejs"] { top: 134px; right: 110px; font-size: 35px; } [data-typing="animation"] { top: 167px; right: 110px; font-size: 35px; } [data-typing="scenejs"] { top: 200px; right: 110px; font-size: 35px; } a { color: #333; text-decoration: none; } body .scenejs-editor-timeline { position: fixed; bottom: 0; max-height: 300px; } </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"> <div class="wrapper"> <div class="container"> <a href="https://github.com/daybrush" target="_blank" data-typing="i">I</a> <a href="https://github.com/daybrush" target="_blank" data-typing="frontend">'m Front-End</a> <a href="https://github.com/daybrush" target="_blank" data-typing="engineer">Engineer</a> <p data-typing="with"> with </p> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0