服务器之家

服务器之家 > 正文

js实现炫酷光感效果

时间:2021-09-16 16:23     来源/作者:Cool_breeze_

本文实例为大家分享了js实现炫酷光感效果的具体代码,供大家参考,具体内容如下

js实现炫酷光感效果

首先写一个大盒子

  1. <div class="main"></div>

然后给这个大盒子添加样式

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5.  
  6. html,
  7. body {
  8. height: 100%;
  9. overflow: hidden;
  10. }
  11.  
  12. body {
  13. background: darkblue;
  14. }
  15.  
  16. .main {
  17. width: 8px;
  18. height: 8px;
  19. position: absolute;
  20. left: 50%;
  21. top: 50%;
  22. transform: translate(-50%, -50%);
  23. perspective: 800px; /* 视角 */
  24. }

在这个大盒子周围写一圈小盒子,我们用js来动态生成

  1. var main = document.getElementsByClassName("main")[0];
  2.  
  3. for (var x = 0; x < 30; x++) {
  4. var i = document.createElement("i");
  5. main.appendChild(i);
  6. }

给这些小盒子添加样式

  1. .main i {
  2. width: 8px;
  3. height: 8px;
  4. border-radius: 50%;
  5. background: rgba(255, 255, 255, 0.5);
  6. box-shadow: 0 0 10px 0 white;
  7. position: absolute;
  8. }
  1. var is = document.getElementsByTagName("i");
  2. for (var i = 0; i < is.length; i++) {
  3. is[i].style.transform = `rotate(${i * 12}deg) translateX(80px)`;
  4. }

效果如下

js实现炫酷光感效果

然后为这些小球添加css动画

  1. .main i {
  2. width: 8px;
  3. height: 8px;
  4. border-radius: 50%;
  5. background: rgba(255, 255, 255, 0.5);
  6. box-shadow: 0 0 10px 0 white;
  7. position: absolute;
  8. animation: run 3s ease-in-out infinite;
  9. }
  10.  
  11. @keyframes run {
  12. 0% {
  13. opacity: 0;
  14. }
  15. 10% {
  16. opacity: 1;
  17. }
  18. 100% {
  19. opacity: 1;
  20. transform: translate3d(0, 0, 560px);
  21. }
  22. }

效果如下

js实现炫酷光感效果

我们发现这些小球都是同时做动画的,那么我现在不想让他们同时做动画怎么办呢~,对了,设置延迟

  1. for (var i = 0; i < is.length; i++) {
  2. is[i].style.transform = `rotate(${i * 12}deg) translateX(80px)`;
  3. is[i].style.animationDelay = `${i * 0.05}s`;
  4. }

炫光效果如下

js实现炫酷光感效果

还没完

现在是30个i,我们把它变成60个会怎么样呢

  1. var main = document.getElementsByClassName("main")[0];
  2.  
  3. for (var x = 0; x < 60; x++) {
  4. var i = document.createElement("i");
  5. main.appendChild(i);
  6. }
  7.  
  8. var is = document.getElementsByTagName("i");
  9. for (var i = 0; i < is.length; i++) {
  10. is[i].style.transform = `rotate(${i * 12}deg) translateX(80px)`;
  11. is[i].style.animationDelay = `${i * 0.05}s`;
  12. }

效果如下

js实现炫酷光感效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

原文链接:https://blog.csdn.net/Cool_breeze_/article/details/108189126

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部