js实现文字字母围绕三维小球旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:js实现文字字母围绕三维小球旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;700&display=swap'> <style> body { height: 100vh; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; font-weight: 400; font-size: 22px; background: #000; color: #fff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .word { position: relative; z-index: 1; font-family: "Titillium Web", sans-serif; } .word:before { content: ""; background: radial-gradient(circle at 40% 20%, #fcfcfc 0%, #ddd 10%, #333 50%, black 70%); border-radius: 50%; width: 80px; height: 80px; position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-40%, -35%); filter: blur(0.5px); } span { position: absolute; z-index: 1; top: 0; left: 0; } </style> </head> <body> <div class="word">SPACE INVADERS </div> <script> /*-------------------- Vars --------------------*/ let time = 0; let mouseX = window.innerWidth * 0.75; let x = 0; /*-------------------- Options --------------------*/ const opt = { radius: 100, radiusY: 0.4, maxSpeed: 0.05, maxRotation: 50, minOpacity: 0.3, spacer: '*' }; /*-------------------- Utils --------------------*/ const scale = (a, b, c, d, e) => { return (a - b) * (e - d) / (c - b) + d; }; const lerp = (v0, v1, t) => { return v0 * (1 - t) + v1 * t; }; /*--.........完整代码请登录后点击上方下载按钮下载查看
网友评论0