css实现文字发光动画效果代码-html代码-BFW代码库

css实现文字发光动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现文字发光动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
@import url(https://fonts.bunny.net/css?family=changa:400,700|hanken-grotesk:400,700);

body {
	min-height: 100svh;
	display: grid;
	place-content: center;
	font-family: 'Hanken Grotesk', sans-serif;
  background: black;
  color: white;
  overflow: hidden;
}

.expansion{
  --clr: rgba(255 255 255 / .25);
  --clr-1: red;
  --clr-2: orange;
  --clr-3: yellow;
  --clr-4: green;
  --clr-5: aqua;
  --clr-6: blue;
  --clr-7: purple;
/*  outline: 1px dashed red;*/
  position: relative;
  font-weight: 700;
  margin: 0;
  padding: 0;
  font-size: 10rem;
  line-height: 1;
  color: transparent;
  background-clip: text; 
  background-image: linear-gradient(90deg,
    transparent 10px,
    var(--clr-1) 10px, 
    var(--clr-2) 94px, 
    var(--clr-3) 210px, 
    var(--clr-4) 322px, 
    var(--clr-5) 395px, 
    var(--clr-6) 520px, 
    var(--clr-7) 597px
  );

  
  &::before,
  &::after{
    content: '';
    position: absolute;
    inset: 0svh 0;
    animation: expand 1000ms ease-in-out forwards ;
    z-index: -1;
    background: 
      linear-gradient(to bottom, black, transparent, black),
      linear-gradient(90deg,
        transpare.........完整代码请登录后点击上方下载按钮下载查看