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', heart);

}

colorChange(initialColor);

</script>

</div>

</body>

</html>

index.html

实现过程：

CSS样式

body {

  height: 100vh;

  box-sizing: border-box;

  background: #333;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  overflow-y: hidden;

}

justify-content：在弹性盒对象的 <div> 元素中的各项周围留有空白　　传送门

overflow-y：属性规定是否对内容的上/下边缘进行裁剪

　参数hidden：裁剪内容 - 不提供滚动机制　　传送门

animation：将动画与 div 元素绑定　　传送门

text-shadow：向文本设置阴影　　传送门

opacity：value　　规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）　　传送门

filter ：定义了元素模糊与饱和度　　传送门

三个按钮CSS样式

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;

}

text-shadow：向文本设置阴影　　传送门

border-color：设置4 个边框的颜色　　传送门

1个参数

border-color:red;

所有 4 个边框都是红色

2个参数

border-color:dotted red green;

上边框和下边框是红色

右边框和左边框是绿色

border-color:red green blue;

上边框是红色

右边框和左边框是绿色

下边框是蓝色

border-color:red green blue pink;

上边框是红色

右边框是绿色

下边框是蓝色

左边框是粉色

border-color参数属性值

box-shadow：设置一个或多个下拉阴影的框　　传送门

opacity：设置 div 元素的不透明级别　　传送门

(制作彩色霓虹灯发光文字动画关键！)

引入typed.js并添加自定义改变颜色函数colorChange(color, heart)

<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', heart);

}

colorChange(initialColor);

</script>

将按钮绑定js事件

<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>

JS框架_(Typed.js)彩色霓虹灯发光文字动画的更多相关文章

JS框架_(JQuery.js)绚丽的3D星空动画
百度云盘: 传送门密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...
JS框架_(Laydate.js)简单实现日期日历
百度云盘传送门密码:71hf JavaScript日期与时间组件_____laydate.js 日期日历效果: <!DOCTYPE html> <html> <hea ...
JS框架_(JQuery.js)圆形多选菜单选项
百度云盘传送门密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...
JS框架_(JQuery.js)网页文字评论弹幕
百度云盘传送门密码:3azl jQuery网页右下角文字评论弹幕效果 <!DOCTYPE html> <html> <head> <title>jQ ...
JS框架_(coolShow.js)图片旋转动画特效
百度云盘传送门密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...
JS框架_(JQuery.js)Tooltip弹出式按钮插件
百度云盘传送门密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...
JS框架_(Popup.js)3D对话框窗口插件
百度云盘传送门密码:afdo 3D对话框窗口插件效果: <!doctype html> <html lang="zh"> <head> &l ...
JS框架_(JQuery.js)动画效果鼠标跟随
百度云盘传送门密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...
JS框架_(JQuery.js)夜晚天空满天星星闪烁动画
百度云盘传送门密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...

随机推荐

excel批量修改文件名称
步骤: 1. 然后将标准号所在的列复制三份到旁边相邻的空白列 2. 使用方方格子让三列中最左面的列只保存如下格式的数据: DB37/T或DB37/ 3. 使用方方格子让三列中中间的列的只保存如下格式的 ...
Hadoop单机模式/伪分布式模式/完全分布式模式
一.Hadoop的三种运行模式(启动模式) 一.单机(非分布式)模式这种模式在一台单机上运行,没有分布式文件系统,而是直接读写本地操作系统的文件系统. 默认情况下,Hadoop即处于该模式,用于开发 ...
C中的函数指针的用法
include<stdio.h> typedef int (*Cal)(int a,int b);//定义一个函数指针,第一个int是指向函数的返回值的类型,后面括号里面的两个int是指指 ...
H5的video标签在网页上播放MP4视频时只有声音没有画面
最近做一个项目时,发现mp4文件播放时没有图像,只有声音,代码检查了N次,都没有问题,就算是直接使用网上的实例代码,也只能播放实例视频,mp4文件绝对路径,相对路径也都试了,还是不能播放我的mp4. ...
第四篇 HTML 表单深入了解、注释和a标签的运用
表单深入了解.注释和a标签的运用注释,HTML中的注释格式: 开头  例子: <!-- <div>我被注释了</div> - ...
mybatis查询返回的对象不为null，但是属性值为null
返回的对象不为null,但是属性值为null 代码如下: <resultMap id="BaseResultMap" type="com.trhui.ebook.d ...
VUE 从零开始学习笔记一
最近刚跳到一个新公司不是很忙决定系统的学习一下VUE这个前端框架参考官方API 好了废话不多说开始了首先说一下吧现在很火的主流三大前端框架 Vue,Angular.React, 为什么 ...
MySQL索引之数据结构及算法原理
MySQL索引之数据结构及算法原理 MySQL支持多个存储引擎,而各种存储引擎对索引的支持也各不相同,因此MySQL数据库支持多种索引类型,如BTree索引,哈希索引,全文索引等等.本文只关注BTre ...
django优化--ORM查询
ORM提供了两个方法用来优化查询效率 1. select_related 有两张表:表结构如下: class Scheme(models.Model): """ 套餐类 ...
shell中数字大小的比较
[整数之间的比较] 示例脚本: #!/bin/bash if [ $1 -gt $2 ] then echo "参数$1大于参数$2" else echo "参数$1小于 ...

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

JS框架_(Typed.js)彩色霓虹灯发光文字动画的更多相关文章

随机推荐

热门专题