霓虹灯闪烁特效

最新推荐文章于 2022-03-14 04:00:00 发布
最新推荐文章于 2022-03-14 04:00:00 发布
阅读量314 收藏
点赞数 1
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangzuruiqqq/article/details/117742060
版权

公司15周年庆典 不想再站一排呆呆的念台词 做了个小效果在这里插入图片描述
上代码把
纯css样式 控制 复制就能跑

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3霓虹灯文字闪烁特效</title>

<style>
@import url("https://fonts.googleapis.com/css?family=Poppins:900&display=swap");
html,
body {
  background-color: black;
  
  margin: 5rem 6rem;
  text-align: center;
  font-family: 'Poppins', 'sans-serif';
  
}
/* 文字的盒子的淡出效果 */
.aaa{
-webkit-animation-name: fadeIn; /*动画名称*/
-webkit-animation-duration: 3s; /*动画持续时间*/
-webkit-animation-iteration-count: 1; /*动画次数*/
-webkit-animation-delay: 0s; /*延迟时间*/
}

@-webkit-keyframes fadeIn {
0% {
opacity: 0; /*初始状态 透明度为0*/
}
50% {
opacity: 0; /*中间状态 透明度为0*/
}
100% {
opacity: 1; /*结尾状态 透明度为1*/
}
}

h1, h2 {
  margin: 0;
  padding: 0;
  color: white;
  display: inline-block;
  font-size: 10rem;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}

h2 {
  font-size: 8rem;
}

h1:nth-child(0n + 0), h2:nth-child(5n + 0) {
  -webkit-animation-name: animateGlithcy;
          animation-name: animateGlithcy;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-duration: 0s;
          animation-duration: 0s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  animation-direction: alternate-reverse;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

h1:nth-child(0n + 1), h2:nth-child(5n + 1) {
  -webkit-animation-name: animateGlithcy;
          animation-name: animateGlithcy;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  animation-direction: alternate-reverse;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

h1:nth-child(0n + 2), h2:nth-child(5n + 2) {
  -webkit-animation-name: animateGlithcy;
          animation-name: animateGlithcy;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  animation-direction: alternate-reverse;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

h1:nth-child(0n + 3), h2:nth-child(5n + 3) {
  -webkit-animation-name: animateGlithcy;
          animation-name: animateGlithcy;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  animation-direction: alternate-reverse;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

h1:nth-child(0n + 4), h2:nth-child(5n + 4) {
  -webkit-animation-name: animateGlithcy;
          animation-name: animateGlithcy;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  animation-direction: alternate-reverse;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

h1:nth-child(0n + 5), h2:nth-child(5n + 5) {
  -webkit-animation-name: animateGlithcy;
          animation-name: animateGlithcy;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  animation-direction: alternate-reverse;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes animateGlithcy {
  0% {
    opacity: .1;
    background-position: 0 0;
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
  10% {
    background-position: 5px 0;
  }
  20% {
    background-position: -5px 0;
  }
  30% {
    background-position: 15px 0;
  }
  40% {
    background-position: -5px 0;
  }
  50% {
    background-position: -25px 0;
  }
  60% {
    background-position: -50px 0;
  }
  70% {
    background-position: 0 -20px;
  }
  80% {
    background-position: -60px -20px;
  }
  81% {
    background-position: 0 0;
  }
  100% {
    opacity: 1;
    background-position: 0 0;
    -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg);
  }
}

@keyframes animateGlithcy {
  0% {
    opacity: .1;
    background-position: 0 0;
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
  10% {
    background-position: 5px 0;
  }
  20% {
    background-position: -5px 0;
  }
  30% {
    background-position: 15px 0;
  }
  40% {
    background-position: -5px 0;
  }
  50% {
    background-position: -25px 0;
  }
  60% {
    background-position: -50px 0;
  }
  70% {
    background-position: 0 -20px;
  }
  80% {
    background-position: -60px -20px;
  }
  81% {
    background-position: 0 0;
  }
  100% {
    opacity: 1;
    background-position: 0 0;
    -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg);
  }
}
</style>

</head>
<body>
<div class="aaa">
   <h1>庆</h1>
   <h1>x</h1>
   <h1>x</h1>
   <br/>
   <h2>15</h2>
   <h2>周</h2>
   <h2>年</h2>
   <h2>快</h2>
   <h2>乐</h2>
</div>
</body>
</html>

单独这一个觉的有些单调 又加入了隧道跳转
在这里插入图片描述
计算好时间节点 隧道–>霓虹灯这样
隧道的代码量很大
html 两个js 一个css

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Three.js Tube</title>

<link rel="stylesheet" href="css/style.css">

</head>
<body>
   
<script src='js/three.min.js'></script>
<script src="js/script.js"></script>
<script src="../jquery.min.js"></script>
<script>
    // setTimeout("window.location.href='../jiaoben7579/index.html'",5000)
</script>
</body>
</html>

css

body {
  margin: 0;
  overflow: hidden;
}

script.js

window.addEventListener("load", init);

function init() {
    // 幅と高さを指定
    const width = window.innerWidth;
    const height = window.innerHeight;

    // レンダラーを作成
    const renderer = new THREE.WebGLRenderer();
    document.body.appendChild(renderer.domElement);
  
    // シーンを作成
    const scene = new THREE.Scene();

    // カメラを作成
    const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
    camera.position.z = 500;

    // ポイントを作成
    const points = [
      [60,180], [120,240], [180,300], [280,180], [180,120], [60,60], [60,180]
    ];
    for (let i = 0; i < points.length; i++) {
      const x = points[i][0];
      const y = points[i][0];
      const z = points[i][1];
      points[i] = new THREE.Vector3(x, y, z);
    }
    
    // パスを作成
    const path = new THREE.CatmullRomCurve3(points);

    // ジオメトリを作成
    const geometry = new THREE.TubeGeometry(path, 100, 10, 10, true);

    // マテリアルを作成
    const material = new THREE.MeshLambertMaterial({
      color: 0x64E5E8,
      wireframe: true
    });

    // メッシュを作成
    const mesh = new THREE.Mesh(geometry, material);
    const ambient = new THREE.AmbientLight();
    scene.add(mesh, ambient);

    let percentage = 0;
    function render() {
      percentage += 0.00100;
      const p1 = path.getPointAt(percentage % 1);
      const p2 = path.getPointAt((percentage + 0.01) % 1);
      camera.position.set(p1.x, p1.y, p1.z);
      camera.lookAt(p2);
      renderer.render(scene, camera);
      requestAnimationFrame(render);
    }

    render();
  
    window.addEventListener("resize", onResize);
  
    // リサイズ処理
    function onResize() {
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(width, height);
      camera.aspect = width / height;
      camera.updateProjectionMatrix();
    }

    onResize();
}

three.min.js

这个js太大  去网上搜一下吧  作者放不上来
09.霓虹灯加载特效
粉丝们务必加入微信粉丝群
01-28 238
效果 (源码网盘地址在最后) 关注公众号《大迁世界》，查看更多视频教程！ 源码 index.html <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html
PLC控制的霓虹灯闪烁
01-16
基于PLC控制的霓虹灯闪烁电路的设计 1. 概述 1 2. 控制系统介绍和控制过程要求 1 3. I/O分配表及PLC型号选择 2 4. PLC端子接线图 6 5. 控制流程图与梯形图 6 6. 程序说明 9 7. 调试与完善 9 8. 系统调试 9 9. 程序运行原理说明 9 10. 设计总结 10 11. 参考书目 10
霓虹灯闪烁
u014330950的博客
12-06 633
无标题文档 body { background: #333; text-shadow: 0 1px 1px rgba(0, 0, 0, .5); } .button { background: #222 url(overlay-button.png) repeat-x 0 0; display: inline-block; padding: 5px 15px 6px; color:
霓虹灯效果
qq_41176800的博客
12-18 1147
前期准备工作（1）准备好字体，可以到网上（百度）搜索Neon字体或霓虹灯字体。（2）准备好背景图片。步骤及说明1、准备并处理好背景图层。说明：（1）一般可复制图层并转换为智能对象后，对其...
实现霓虹灯闪烁效果(UI)
hakusan的专栏
08-22 3022
//延展添加对象 @interface AppDelegate () {     UIView *_containerView;     NSTimer *_timer; } @end //- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictiona
霓虹灯(light)
HybridCOW_HORSE的博客
03-14 900
【题目描述】 小石家旁边有一个大型商场，晚上会有不停变换的霓虹灯，各种各样的颜色非 常漂亮，小石每天晚上都喜欢站在窗口看不停变换的霓虹灯。这个商场的霓虹灯 在每个时刻都是同一种颜色。小石每天晚上会在商场开始亮灯时就站在窗口观看。 忽然有一天，小石想数数霓虹灯到底有多少种颜色，商场的霓虹灯每一种颜色 会持续 15 秒，比如一开始霓虹灯都是红色持续 15 秒后，第 16 秒会变为蓝色， 蓝色持续 15 秒后，第 31 秒会变为紫色，等等。 当然商场的霓虹灯的颜色不是无穷的，当颜色用尽，就会从头再变换一遍。比 如
CSS3实现背景模糊霓虹灯闪烁特效源码.zip
10-31
在本资源中，"CSS3实现背景模糊霓虹灯闪烁特效源码.zip" 提供了一种使用CSS3技术来创建动态、引人注目的视觉效果的方法。这种效果通常被用在网页设计中，以增强用户体验并营造出独特的氛围。下面我们将深入探讨这个...
html5+css3实现可以自定义文本的霓虹灯闪烁特效源码.zip
11-03
本压缩包中的源码是关于使用HTML5和CSS3实现一个可自定义文本的霓虹灯闪烁特效，这是一种常用于创建动态效果和吸引用户注意力的设计手法。 HTML5作为下一代超文本标记语言，引入了许多新的元素和属性，以更好地结构...
CSS3霓虹灯文字闪烁特效
06-24
"CSS3霓虹灯文字闪烁特效"是一种利用CSS3动画（animation）属性来实现的文字效果，它能够使文字呈现出类似霓虹灯的闪烁效果，增加网页的吸引力和动态感。这一特效尤其适用于夜店、音乐节、派对等主题的网站设计，...
掌握CSS3实现霓虹灯闪烁特效
通过将@keyframes定义好的动画应用到元素上，并设置合适的动画属性，就能让元素在网页上展示出流畅的霓虹灯闪烁效果。 渐变（gradients）则是用来创建两种或多种颜色的平滑过渡效果，它在霓虹灯特效中常用于模拟...
CSS3打造霓虹灯闪烁特效教程
CSS3灯光闪烁-霓虹灯特效的知识点主要围绕在使用CSS3技术实现视觉上的灯光效果，模拟现实中的霓虹灯光效果。CSS3是最新版的层叠样式表，它提供了比CSS2更多的样式和动画功能，这些功能可以帮助开发者创造出更为复杂...
一个网页标题title的闪动提示效果实现思路
09-04
通过网页title来提示用户有新消息这个功能很常见，下面有个不错的示例，大家可以参考下
JS九宫格布局随机闪烁特效
06-24
JS九宫格布局随机闪烁特效是一款用padding实现高度自适应，百分比实现宽度自适应，整体九宫格适应屏幕，并随机获取标签和颜色，利用定时器实现开始和停止。
MCS51霓虹灯_Proteus仿真
GAI159的博客
01-26 1504
霓虹灯 功能：查表程序设计，实现LED灯的控制 硬件：P0口以总线形式接16个LED 硬件连接： 程序： ORG 0 START: MOV R0,#0FFH ;工作寄存器提取数组首地址，原始数据存放在R0中 LOOP: INC R0 CJNE R0,#25,LOP ;R0中值不为25则跳转至LOP MOV R0,#0 ;否则（R0=25），将R0置0，循环 L...
交通灯/霓虹灯控制电路
qq_44682019的博客
10-17 786
交通控制其实用汇编也可以实现。 交通灯控制 8255四个端口 40CH ~ 40FH data segment encode dw 0861H,0451H,030cH,028aH,-1 ; 控制编码 remain db 30,3,20,3 ; 维持时间 clock dw ?,? ; 存放延时初始时间 PortA equ 40cH ; 8255的PA口地址 s db "traffic light control. Press [ESC]
161-电池按钮酷炫霓虹灯悬停特效
粉丝们务必加入微信粉丝群
06-15 515
效果 (源码网盘地址在最后) 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。 github 地址：https://github.com/qq449245884/vue-okr-tree 视频演示 HTML+CSS 完成电池按钮酷炫霓虹灯悬停特效，这个可新鲜了，开赞开赞！ 源码 index.html <!DOCTY
html5 霓虹灯,HTML5/WebGL催眠的霓虹灯
weixin_34342589的博客
06-30 258
HTML导入代码模板：precision mediump float;uniform float time;uniform vec2 resolution;vec2 R(vec2 p,float a) {return vec2( p.x*cos(a) + p.y*sin(a),-p.x*sin(a) + p.y*cos(a));}void main() {float vc = time / 50....
css 按钮悬停效霓虹灯特效
p1967914901的博客
04-20 200
css 按钮悬停效霓虹灯特效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>按钮悬停效霓虹灯特效</title> <style> * { margin: 0;
Kotlin02.frameLayout霓虹灯效果
augfun的博客
08-08 638
MainActivity.kt package com.example.framelayout import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.os.Handler import android.os.Message import android.widget.TextView import java.lang.ref.WeakReference import java.ut
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值