JS+CSS实现炫酷光感效果
更新时间：2020年09月05日 14:31:11 作者：SADON_jung
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这次项目中做了一个图片上传,要求是大于2MB的就压缩成2MB一下的再上传,下面这篇文章主要给大家介绍了关于uni-app开发微信小程序之H5压缩上传图片的问题,需要的朋友可以参考下2023-03-03
在之前的编程语言排行榜中，我们曾介绍过转正在即的JavaScript语言，正如文章中阐明的那样，JavaScript不仅是最具活力的脚本语言，还是是最有用的编程语言之一。2010-08-08
当鼠标滑过超链接出现提示框效果实例，需要的朋友可以参考一下2013-04-04
这篇文章主要介绍了Javascript柯里化实现原理及作用解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
这篇文章主要为大家详细介绍了微信小程序三级联动选择器使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-02-02
这篇文章主要介绍了JS获取文件大小的方法,结合实例总结分析了JavaScript获取文件大小的常用技巧,并给出了判断文件格式与大小的完整实例供读者参考,需要的朋友可以参考下2015-12-12
这篇文章主要为大家详细介绍了JS实现模态框拖拽动态效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了JavaScript中解析JSON数据的三种方法,本文讲解了eval()方法、new Function方法、JSON.parse()方法等三种方法,需要的朋友可以参考下2015-07-07
JavaScript有许多批量创建数组的方法，为了衡量它们的性能，我分别使用不同的方法创建一个长度为100000的数组，且键和值相等，今天小编给大家分享基于js批量创建数组的方法，一起看看吧2017-03-03
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
下面的章节描述的是一个 合理 的现代 JavaScript 开发风格指南，并非硬性规定。其想送出的核心理念是高度统一的代码风格（the law of code style consistency）。2014-05-05
最新评论