splitting实现文字字母围成一圈环绕地球立体旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:splitting实现文字字母围成一圈环绕地球立体旋转动画效果代码
代码标签: splitting 文字 字母 环绕 地球 立体 旋转 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/splitting.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/splitting-cells.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: monospace; } @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap'); body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: black; transform-style: preserve-3d; font-family: 'Black Han Sans', sans-serif; } body:after { content: ""; background: url('//repo.bfw.wiki/bfwrepo/image/630e852e40497.png'); position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: 2; mix-blend-mode: screen; opacity: 0.4; } .circle { transform-style: preserve-3d; animation: animate 8s linear infinite; --deg: calc(360deg / var(--numchs)); z-index: 1 } @keyframes animate { 0% { transform: perspective(1000px) rotateY(360deg) rotateX(15deg); } 100% { transform: perspective(1000px) r.........完整代码请登录后点击上方下载按钮下载查看
网友评论0