jquery+css随机数字生成动画效果代码-html代码-BFW代码库

jquery+css随机数字生成动画效果代码

代码语言：html

所属分类：动画

代码描述：jquery+css随机数字生成动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Nixie+One" rel="stylesheet">
<style>
    body {
  background: #060606;
  margin: 20px;
  font-family: "Nixie One", cursive;
}

.nixie-container {
  position: relative;
  font-size: 10em;
  text-align: center;
  letter-spacing: 0.1em;
}
.nixie-container .tube {
  position: relative;
  display: inline-block;
  text-align: center;
  width: 150px;
  height: 240px;
  margin: 6px;
  border-top: 2px solid rgba(240, 200, 200, 0.12);
  border-left: 2px solid rgba(240, 200, 200, 0.1);
  border-right: 2px solid rgba(240, 200, 200, 0.1);
  border-bottom: 12px solid #1e1e1e;
  border-radius: 60px 60px 8px 8px;
  background-color: rgba(255, 110, 11, 0.02);
  box-shadow: inset -6px 4px 30px 2px rgba(255, 110, 11, 0.1), 0 -2px 32px 0 rgba(255, 169, 22, 0.06);
  animation-duration: 4.5s;
  animation-name: tube-glow;
}
.nixie-container .tube::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 14px;
  width: 46px;
  height: 24px;
  border-top: 10px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  transform: rotate(43deg);
}
.nixie-container .tube::after {
  content: "";
  position: absolute;
  top: 80px;
  right: 10px;
  width: 10px;
  height: 150px;
  border-right: 2px solid rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}
.nixie-container .tube .digit {
  position: absolute;
  width: 170px;
  line-height: 1.65em;
  left: 0;
  text-shadow: rgba(50, 50, 50, 0.05) 0 0 1px;
  color: transparent;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: rgba(40, 40, 40, 0.15);
}
.nixie-container .tube .digit.active {
  color: #ffdb9e;
  opacity: 1;
  text-shadow: #ff4d00 0 0 112px, #ffa916 0 0 48px, #ef9700 0 0 24px, #ef9700 0 0 16px, #ef9700 0 0 4px;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: #ff6e00;
}

@keyframes tube-glow {
  0% {
    box-shadow: inset -3px 4px 30px 2px rgba(255, 110, 11, 0.07), 0 -2px 32px 0 rgba(255, 169, 22, 0.06);
    border-top: 2px solid rgba(240, 150, 150, 0.15);
    border-right: 2px solid rgba(240, 150, 150, 0.15);
  }
  30% {
    box-shadow: inset -6px 4px 30px 2px rgba(255, 110, 11, 0.1), 0 -2px 32px 0 rgba(255, 169, 22, 0.06);
  }
  55% {
    box-shadow: inset -5px 4px 30px 2px rgba(255, 110, 11, 0.08), 0 -2px 32px 0 rgba(25.........完整代码请登录后点击上方下载按钮下载查看