弥红灯店铺开张指示牌效果代码-html代码-BFW代码库

弥红灯店铺开张指示牌效果代码

代码语言：html

代码描述：弥红灯店铺开张指示牌效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:100);

:root {
  --text-color: #f00;
  --border-color: #3da7f8;
  --animation-time: 1s;
  --text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 5px var(--text-color),
    0 0 10px var(--text-color), 0 0 10px var(--text-color),
    0 0 10px var(--text-color), 0 0 10px var(--text-color),
    0 0 20px var(--text-color), 0 0 30px var(--text-color),
    0 0 40px var(--text-color), 0 0 55px var(--text-color),
    0 0 75px var(--text-color);
  --box-shadow: inset 0 0 50px var(--border-color), 0 0 10px var(--border-color),
    0 0 20px var(--border-color), 0 0 30px var(--border-color);
}

body {
  margin: 0px;
  background: #00061c;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

div {
  background-color: transparent;
  border: 3px solid rgba(255, 255, 255, 0.33);
  border-radius: 20px;
  padding: 14px 24px;
  transform: rotate(-6deg);
  animation: turnOnBorder 0.24s forwards step-end,
    flickerBorder calc(var(--animation-time) * 16) infinite step-end 1s;
}

p {
  font-family: Roboto;
  margin: 0px;
  color: #fff;
}

span {
  font-size: 100px;
}

p span {
  opacity: 0.33;
  animation: turnOn forwards step-end;
}

p span:.........完整代码请登录后点击上方下载按钮下载查看