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 相关文章推荐
IE bug table元素的innerHTML
Jan 11 Javascript
jquery下实现overlay遮罩层代码
Aug 25 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
在Node.js中使用Javascript Generators详解
May 05 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
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代码
2010/08/08 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
10 个经典PHP函数
2013/10/17 PHP
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
详解php实现页面静态化原理
2017/06/21 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
Bootstrap按钮组实例详解
2017/07/03 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
10个Python小技巧你值得拥有
2018/09/29 Python
python自动生成证件号的方法示例
2021/01/14 Python
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
特步官方商城:Xtep
2017/03/21 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
文明礼仪事迹材料
2014/01/09 职场文书
本科生的职业生涯规划范文
2014/01/09 职场文书
一份创业计划书范文
2014/02/08 职场文书
暑假家长评语大全
2014/04/17 职场文书
班级文化标语
2014/06/23 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
小孩不笨观后感
2015/06/03 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
详解 TypeScript 枚举类型
2021/11/02 Javascript
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏