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 相关文章推荐
用js+xml自动生成表格的东西
Dec 21 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery解析json格式数据简单实例
Jan 22 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Dec 13 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
javascript实现移动端上传图片功能
Aug 18 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命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
禁止js文件缓存的代码
2010/04/09 Javascript
JQuery优缺点分析说明
2010/06/09 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
横向对比分析Python解析XML的四种方式
2016/03/30 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
毕业生造价工程师求职信
2013/10/17 职场文书
小学生检讨书大全
2014/02/06 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
2014年团支部工作总结
2014/11/17 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
公司老总年会致辞
2015/07/30 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
Python实现拼音转换
2021/06/07 Python