Those3DTexts实现文字悬浮三维立体动画效果代码
代码语言:html
所属分类:悬停
代码描述:Those3DTexts实现文字悬浮三维立体动画效果代码
代码标签: Those3DTexts 文字 悬浮 三维 立体 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /* T3DTL needs some CSS to work */ @import url("//repo.bfw.wiki/bfwrepo/js/module/that-3d-text-library/that-3d-text-library.css"); /* A nice font for the headings. T3DTL works better with chunkier fonts. */ @import url("https://fonts.googleapis.com/css2?family=Lilita+One&display=swap"); /* A little setup to have the text center of the page */ html { width: 100%; height: 100%; margin: 0; padding: 0; } body { width: calc(100% - 2em); height: calc(100% - 2em); padding: 1em; margin: 0; display: flex; align-items: center; justify-content: center; background-color: #e4f9f2; perspective: 700px; } /* Apply the font to all headings */ h1, h2, h3, h4, h5, h6 { font-family: "Lilita One", cursive; font-weight: 400; font-size: 8em; } /* Hide the text while T3DTL sets things up */ [data-3d-text] { opacity: 0; } [data-text-re.........完整代码请登录后点击上方下载按钮下载查看
网友评论0