五彩纸屑掉落动画问题透明胶片答案

【问题标题】：Confetti falling animation problem transparencies五彩纸屑掉落动画问题透明胶片
【发布时间】：2021-11-22 03:34:11
【问题描述】：

大家晚上好，我在我的网站上添加了五彩纸屑掉落动画。五彩纸屑叠加在我的按钮上，我无法单击它们，如何使五彩纸屑可见但透明，以便我可以单击下面的内容？

这是我使用的代码：

<canvas id="my-canvas"></canvas>

<script src="assets/index.min.js"></script>
<script> var confettiSettings = { target: 'my-canvas' };
var confetti = new ConfettiGenerator(confettiSettings);
confetti.render();
</script>

<style>
#my-canvas
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 100000;
    
}


</style>

【问题讨论】：

尝试将pointer-events: none; 添加到您的班级。
不幸的是“pointer-events”无法识别，idk怎么办！
对不起，“无法识别”是什么意思？
当我写指针事件时：无；命令“pointer-events”不会变成蓝色，而是保持白色
嗯，好的。这应该不是问题。只需添加它并尝试它是否有效，因为 pointer-events: none; ist 绝对有效的 css :D

标签： javascript html css web script

【解决方案1】：

您可以使用pointer-events CSS 属性来控制指针与元素交互的某些方面。设置pointer-events: none; 将使指针事件（如悬停和单击）直接通过元素，就好像它不存在一样。这是一些文档：pointer-events

【讨论】：

【解决方案2】：

在这里，我希望这会有所帮助：

index.html

<div class="js-container container"></div>

index.css

@keyframes confetti-slow {
  0% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
  
  100% { transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg); }
}

@keyframes confetti-medium {
  0% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
  
  100% { transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg); }
}

@keyframes confetti-fast {
  0% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
  
  100% { transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg); }
}

.container {
  width: 100vw;
  height: 100vh;
  background: #f0f0f0;
}

.confetti-container {
  perspective: 700px;
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.confetti {
  position: absolute;
  z-index: 1;
  top: -10px;
  border-radius: 0%;

  &--animation-slow {
    animation: confetti-slow 2.25s linear 1 forwards;
  }
  
  &--animation-medium {
    animation: confetti-medium 1.75s linear 1 forwards;
  }
  
  &--animation-fast {
    animation: confetti-fast 1.25s linear 1 forwards;
  }
}

脚本文件

const Confettiful = function(el) {
  this.el = el;
  this.containerEl = null;
  
  this.confettiFrequency = 3;
  this.confettiColors = ['#fce18a', '#ff726d', '#b48def', '#f4306d'];
  this.confettiAnimations = ['slow', 'medium', 'fast'];
  
  this._setupElements();
  this._renderConfetti();
};

Confettiful.prototype._setupElements = function() {
  const containerEl = document.createElement('div');
  const elPosition = this.el.style.position;
  
  if (elPosition !== 'relative' || elPosition !== 'absolute') {
    this.el.style.position = 'relative';
  }
  
  containerEl.classList.add('confetti-container');
  
  this.el.appendChild(containerEl);
  
  this.containerEl = containerEl;
};

Confettiful.prototype._renderConfetti = function() {
  this.confettiInterval = setInterval(() => {
    const confettiEl = document.createElement('div');
    const confettiSize = (Math.floor(Math.random() * 3) + 7) + 'px';
    const confettiBackground = this.confettiColors[Math.floor(Math.random() * this.confettiColors.length)];
    const confettiLeft = (Math.floor(Math.random() * this.el.offsetWidth)) + 'px';
    const confettiAnimation = this.confettiAnimations[Math.floor(Math.random() * this.confettiAnimations.length)];
    
    confettiEl.classList.add('confetti', 'confetti--animation-' + confettiAnimation);
    confettiEl.style.left = confettiLeft;
    confettiEl.style.width = confettiSize;
    confettiEl.style.height = confettiSize;
    confettiEl.style.backgroundColor = confettiBackground;
    
    confettiEl.removeTimeout = setTimeout(function() {
      confettiEl.parentNode.removeChild(confettiEl);
    }, 3000);
    
    this.containerEl.appendChild(confettiEl);
  }, 25);
};

window.confettiful = new Confettiful(document.querySelector('.js-container'));

这里是 Codepen.io 的链接：https://codepen.io/jacobgunnarsson/pen/pbPwga

【讨论】：