js实现炫酷光感效果


Posted in Javascript onSeptember 05, 2020

本文实例为大家分享了js实现炫酷光感效果的具体代码,供大家参考,具体内容如下

js实现炫酷光感效果

首先写一个大盒子

<div class="main"></div>

然后给这个大盒子添加样式

* {
 margin: 0;
 padding: 0;
}

html,
body {
 height: 100%;
 overflow: hidden;
}

body {
 background: darkblue;
}

.main {
 width: 8px;
 height: 8px;
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 perspective: 800px; /* 视角 */
}

在这个大盒子周围写一圈小盒子,我们用js来动态生成

var main = document.getElementsByClassName("main")[0];

for (var x = 0; x < 30; x++) {
 var i = document.createElement("i");
 main.appendChild(i);
}

给这些小盒子添加样式

.main i {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.5);
 box-shadow: 0 0 10px 0 white;
 position: absolute;
}
var is = document.getElementsByTagName("i");
for (var i = 0; i < is.length; i++) {
 is[i].style.transform = `rotate(${i * 12}deg) translateX(80px)`;
}

效果如下

js实现炫酷光感效果

然后为这些小球添加css动画

.main i {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.5);
 box-shadow: 0 0 10px 0 white;
 position: absolute;
 animation: run 3s ease-in-out infinite;
}

@keyframes run {
 0% {
 opacity: 0;
 }
 10% {
 opacity: 1;
 }
 100% {
 opacity: 1;
 transform: translate3d(0, 0, 560px);
 }
}

效果如下

js实现炫酷光感效果

我们发现这些小球都是同时做动画的,那么我现在不想让他们同时做动画怎么办呢~,对了,设置延迟

for (var i = 0; i < is.length; i++) {
 is[i].style.transform = `rotate(${i * 12}deg) translateX(80px)`;
 is[i].style.animationDelay = `${i * 0.05}s`;
}

炫光效果如下

js实现炫酷光感效果

还没完

现在是30个i,我们把它变成60个会怎么样呢

var main = document.getElementsByClassName("main")[0];

for (var x = 0; x < 60; x++) {
 var i = document.createElement("i");
 main.appendChild(i);
}

var is = document.getElementsByTagName("i");
for (var i = 0; i < is.length; i++) {
 is[i].style.transform = `rotate(${i * 12}deg) translateX(80px)`;
 is[i].style.animationDelay = `${i * 0.05}s`;
}

效果如下

js实现炫酷光感效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现iframe动态调整高度的代码
Jan 06 Javascript
prototype Element学习笔记(篇二)
Oct 26 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
Feb 25 Javascript
js中判断文本框是否为空的两种方法
Jul 31 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
基于vue的验证码组件的示例代码
Jan 22 Javascript
js实现搜索提示框效果
Sep 05 #Javascript
jQuery实现简单三级联动效果
Sep 05 #jQuery
javascript canvas实现简易时钟例子
Sep 05 #Javascript
vue中使用vue-pdf的方法详解
Sep 05 #Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 #Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 #Javascript
js实现可爱的气泡特效
Sep 05 #Javascript
You might like
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
JavaScript中的对象化编程
2008/01/16 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
numpy排序与集合运算用法示例
2017/12/15 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
python在文本开头插入一行的实例
2018/05/02 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
和谐社区口号
2014/06/19 职场文书
大学生自荐信范文
2015/03/05 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python