文字拆分围绕球体旋转交互动画效果
代码语言:html
所属分类:动画
代码描述:文字拆分围绕球体旋转交互动画效果
下面为部分代码预览,完整代码请点击下载或在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: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: 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%; -webkit-transform: translate(-40%, -35%); transform: translate(-40%, -35%); -webkit-filter: blur(0.5px); filter: blur(0.5px); } span { position: absolute; z-index: 1; top: 0; left: 0; } </style> </head> <body translate="no"> <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 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0