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 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
JS定时器实例
Apr 17 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
8个有意思的JavaScript面试题
Jul 30 Javascript
React实现动效弹窗组件
Jun 21 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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
多重?l件?合查?(二)
2006/10/09 PHP
在PHP中使用灵巧的体系结构
2006/10/09 PHP
php中通过smtp发邮件的类,测试通过
2007/01/22 PHP
php正则校验用户名介绍
2008/07/19 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
PHP编程基本语法快速入门手册
2016/01/07 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
js下用层来实现select的title提示属性
2010/02/23 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
python解析xml简单示例
2019/06/21 Python
Django的CVB实例详解
2020/02/10 Python
Django中的session用法详解
2020/03/09 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
实习教师自我鉴定
2013/09/27 职场文书
汽车机修工岗位职责
2014/03/06 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
博士生导师推荐信
2014/07/08 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
2014年实习期工作总结
2014/11/27 职场文书
困难补助申请报告
2015/05/19 职场文书
在职证明书模板
2015/06/15 职场文书