JS框架_(Typed.js)彩色霓虹灯发光文字动画

Posted Cynical丶Gary

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS框架_(Typed.js)彩色霓虹灯发光文字动画相关的知识,希望对你有一定的参考价值。

 

 

百度云盘  传送门  密码:8oei

 

发光文字动画效果:

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery+CSS3彩色霓虹灯发光文字动画特效</title>

<script src="js/jquery.min.js"></script>

<style>
body {
  height: 100vh;
  box-sizing: border-box;
  background: #333;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: hidden;
}
body p{
  color: #555;
  font-family: \'Quicksand\', sans-serif;
  font-weight: 900;
}
body p i{
  transition: .5s;
}
.fa-codepen{
   -webkit-animation: fade 3s infinite alternate;
  -moz-animation: fade 3s infinite alternate;
  -o-animation: fade 3s infinite alternate;
  animation: fade 3s infinite alternate;
}
a{
  color: #ddd;
}
span {
  font-size: 6em;
  font-family: "Quicksand", sans-serif;
  font-weight: 500;
  color: #ddd;
  transition: .25s;
}
.pink {
  position: absolute;
  text-shadow: 
    2px 2px 1px rgba(0,0,0,.4),
    0 0 20px #fe3a80,
    0 0 40px rgba(255, 0, 91, .75),
    0 0 50px rgba(255, 0, 91, .75),
    0 0 100px rgba(255, 0, 91, .75);
 
}
.pink:before{
  content:\'\';
  position: absolute;
  background: rgba(254, 58, 128, .25);
  z-index: -1;
  opacity: .7;
  filter: blur(50px);
  width: 100%;
  height: 100%;
}
.green {
  position: absolute;
   text-shadow: 2px 2px 1px rgba(0,0,0,.4),
    0 0 20px #69F0AE,
    0 0 40px rgba(0, 230, 118, .75),
    0 0 50px rgba(0, 230, 118, .75),
    0 0 100px rgba(0, 230, 118, .75);
 
  
}
.green:before{
  content:\'\';
  position: absolute;
  background: rgba(105, 240, 174, .25);
  z-index: -1;
  opacity: .7;
  filter: blur(30px);
  width: 100%;
  height: 100%;
}
.blue {
  position: absolute;
  text-shadow: 
  2px 2px 1px rgba(0,0,0,.4),
  0 0 20px #42A5F5,  
  0 0 40px rgba(33, 150, 243, .75),
  0 0 50px rgba(33, 150, 243, .75),
  0 0 60px rgba(33, 150, 243, .75);
 
}
.blue:before{
  content:\'\';
  position: absolute;
  background: rgba(66, 165, 245, .25);
  z-index: -1;
  opacity: .7;
  filter: blur(30px);
  width: 100%;
  height: 100%;
}
.buttons{
  margin-bottom: auto;
  margin-top: 20px;
}
button{
  margin: 0 5px;
  padding: 10px;
  letter-spacing: 1px;
  background: none;
  border: 2px solid #444;
  height: 2.25em;
  border-radius: 2.25em;
  color: #444;
  font-size: 1.25em;
  font-weight: bold;
  text-transform: uppercase;
  transition: .5s;
  outline: none;
}
button:nth-child(1):hover{
  /*Green*/
  color: #00E676;
  text-shadow: 0 0 7px #00E676;
  border-color: #00E676;
  box-shadow: 0 0 15px #00E676, inset 0 0 15px #00E676;
}
button:nth-child(2):hover{
  /*Pink*/
  color: #ff005b;
  text-shadow: 0 0 7px #ff005b;
  border-color: #ff005b;
  box-shadow: 0 0 15px #ff005b, inset 0 0 15px #ff005b;
}
button:nth-child(3):hover{
  /*Blue*/
  color: #2196F3;
  text-shadow: 0 0 7px #2196F3;
  border-color: #2196F3;
  box-shadow: 0 0 15px #2196F3, inset 0 0 15px #2196F3;
}
/*Animation*/
@-moz-keyframes fade {
  40% {
    opacity: 0.8;
  }
  42% {
    opacity: 0.1;
  }
  43% {
    opacity: 0.8;
  }
  45% {
    opacity: 0.1;
  }
  46% {
    opacity: 0.8;
  }
}
@-webkit-keyframes fade {
  40% {
    opacity: 0.8;
  }
  42% {
    opacity: 0.1;
  }
  43% {
    opacity: 0.8;
  }
  45% {
    opacity: 0.1;
  }
  46% {
    opacity: 0.8;
  }
}
@-o-keyframes fade {
  40% {
    opacity: 0.8;
  }
  42% {
    opacity: 0.1;
  }
  43% {
    opacity: 0.8;
  }
  45% {
    opacity: 0.1;
  }
  46% {
    opacity: 0.8;
  }
}
@keyframes fade {
  40% {
    opacity: 0.8;
  }
  42% {
    opacity: 0.1;
  }
  43% {
    opacity: 0.8;
  }
  45% {
    opacity: 0.1;
  }
  46% {
    opacity: 0.8;
  }
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Quicksand">

<script src="js/typed.min.js"></script>

<div class="buttons">
  <button onClick="colorChange(colors[0][0],colors[0][1] )">Green</button>
  <button onClick="colorChange(colors[2][0], colors[2][1])">Pink</button>
  <button onClick="colorChange(colors[1][0], colors[1][1])">
    Blue
  </button>
</div>
<div id="typedStrings">
  <p>Welcome!</p>
  <p>Gary</p>
  <p>欢迎O(∩_∩)O~</p>
</div>
<span id="span"></span>

<script type="text/javascript">
$("#span").typed({
  stringsElement: $("#typedStrings"),
  typeSpeed: 70,
  showCursor: false,
  contentType: "html"
});
var colors = [["green","#00E676"], ["blue","#2196F3"], ["pink", "#ff005b"]];
var randomColor = colors[Math.floor(Math.random() * colors.length)];
var initialColor = randomColor[0];
var initialHeartColor = randomColor[1];
function colorChange(color, heart){
  $(\'#span\').attr(\'class\', \'\').addClass(color);
  $(\'body p i\').css(\'color\', initialHeartColor);
  $(\'body p i\').css(\'color\'CSS3制作炫酷的自定义发光文字_Div+Css教程_三联

简易霓虹灯控制器

简易霓虹灯控制器

简易霓虹灯控制器

简易霓虹灯控制器

前端例程20220906:霓虹灯效按钮