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 相关文章推荐
JavaScript效率调优经验
Jun 04 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
AngularJS中的路由使用及实现代码
Oct 09 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 Javascript
关于Vue中的options选项
Mar 22 Vue.js
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
Ajax PHP分页演示
2007/01/02 PHP
php cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
微信跳一跳python代码实现
2018/01/05 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
Python高斯消除矩阵
2019/01/02 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
Python3 使用pillow库生成随机验证码
2019/08/26 Python
Python enumerate内置库用法解析
2020/02/24 Python
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
竞选演讲稿范文
2013/12/28 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
创业计划书之物流运送
2019/09/17 职场文书