JS+CSS实现炫酷光感效果


Posted in Javascript onSeptember 05, 2020

JS+CSS带你实现炫酷光感效果,供大家参考,具体内容如下

效果一:(螺旋式沉浸视觉感受)

JS+CSS实现炫酷光感效果

效果二:(旋涡式远观视觉感受)

JS+CSS实现炫酷光感效果

实现代码:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>光感效果</title>
 </head>
 <style>
 html,body{
  height: 100%;
  overflow: hidden;
 }
 body{
  background-color: #c08eaf;
 }
 .main{
  /* 中心点 */
  width: 8px;
  height: 8px;
  /* background-color: aqua; */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  /* 
  *景深,修改此属性可获得如上图展示的不同效果
  *如:图一的perspective为400px
  *图二的perspective为800px
  *修改为其它值还可获得更多效果
  */
  perspective: 800px;
 }
 .main i{
  /* 动点 */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background:white;
  box-shadow: 0 0 10px 0 white;
  position: absolute;
  /* 动画 */
  animation: run 3s ease-in-out infinite;
 }
 /* .main i:nth-child(1){
  transform: rotate(0deg) translateX(80px);
 } */
 
 /* 动画 */
 @keyframes run{
  0%{
  opacity: 0;
  }
  10%{
  opacity: 1;
  }
  100%{
  opacity: 1;
  /* 3D动画效果 */
  transform: translate3d(0,0,560px);
  }
 }
 </style>
 <body>
 <div class="main" id="main">
 </div>
 </body>
 <script type="text/javascript">
 //获取元素
 var m = document.getElementById("main");
 for(var i = 0;i<60;i++){
  //创建元素
  var newNode = document.createElement("i");
  //添加元素
  m.appendChild(newNode)
  //设置旋转角度 及x轴方向位移距离
  newNode.style.transform=`rotate(${i*12}deg) translateX(80px)`
  //设置动画延迟
  newNode.style.animationDelay=`${i*0.05}s`
 }
 </script>
</html>

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

Javascript 相关文章推荐
jQuery 拖动层(在可视区域范围内)
May 24 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
JavaScript DOM基础
Apr 13 Javascript
JS模拟实现Select效果代码
Sep 24 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
angular.js分页代码的实例
Jul 27 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 Javascript
js实现网页随机验证码
Oct 19 Javascript
js实现炫酷光感效果
Sep 05 #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
You might like
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
Python中join和split用法实例
2015/04/14 Python
Python性能提升之延迟初始化
2016/12/04 Python
Python 装饰器使用详解
2017/07/29 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
试述DBMS的主要功能
2016/11/13 面试题
《三袋麦子》教学反思
2014/03/02 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
离婚民事起诉状
2015/08/03 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python
浅谈Node的内存泄露问题
2022/05/06 NodeJs
linux目录管理方法介绍
2022/06/01 Servers