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 相关文章推荐
javascript中的对象和数组的应用技巧
Jan 07 Javascript
JavaScript 注册事件代码
Jan 27 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
Google Maps基础及实例解析
Aug 06 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
vue3实现v-model原理详解
Oct 09 Javascript
Vuex的API文档说明详解
Feb 05 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
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
简述vue中的config配置
2018/01/23 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
python中将字典转换成其json字符串
2014/07/16 Python
Python字符串和文件操作常用函数分析
2015/04/08 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
20行python代码实现人脸识别
2019/05/05 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
大学生毕业的自我评价分享
2014/01/02 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
长城的导游词
2015/01/30 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
追悼会家属答谢词
2015/09/29 职场文书
MYSQL 运算符总结
2021/11/11 MySQL