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);
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0