css实现分面玻璃文字动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现分面玻璃文字动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Comfortaa:300,700|Bungee+Shade|Josefin+Sans:400&display=swap"/> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Gochi+Hand&display=swap"/> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap"/> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100vw; min-height: 100vh; font-family: "Exo", "Bungee Shade", cursive, Arial, sans-serif; background-color: #557; color: #fff; display: grid; place-content: center; padding: 1rem; } @font-face { font-family: rotor; src: url("//repo.bfw.wiki/bfwrepo/font/rotor-VF.woff2") format("woff2-variations"); } html { --size: 100vw; --loop: 6s; --delay: 0.15; --background1: #129681; --background2: #085147; --background3: #e01c82; --color1: #ffebe5; --color2: #ffd9ce; background: #282c37; } body { background-image: radial-gradient( circle at 0% 110%, var(--background2), var(--background1) ), radial-gradient(circle at 0% -30%, var(--background3), transparent); background-blend-mode: screen; } h1 { width: var(--size); display: flex; justify-content: center; align-items: center; font-weight: 800; background-color: #000; background-image: repeating-radial-gradient( circle at 120% 110%, #000 10px, #333 20px ), repeating-radial-gradient(circle at -20% 30%, #000 10px, #333 20px); background-blend-mode: screen; filter: contrast(5); mix-blend-mode: lighten; font-family: rotor; font-size:10rem; } span { -webkit-animation: text var(--loop) ease-in alternate infinite; animation: text var(--loop) ease-in alternate infinite; } span:nth-child(1) { -webkit-animation-delay: calc(var(--loop) * -1); animation-delay: calc(var(--loop) * -1); } span:nth-child(2) { -w.........完整代码请登录后点击上方下载按钮下载查看
网友评论0