给before和after伪元素设置js效果的方法

给before和after伪元素设置js效果的方法主要有以下几个步骤：

1. 首先，使用CSS选择器选中要添加效果的元素的before或after伪元素。例如：

div:before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
}

1. 在CSS文件中为该伪元素设置初始样式，例如上述代码为一个div元素的before伪元素设置了一个红色背景、宽度高度为50px的正方形，位于div元素的左上角。

2. 在JavaScript文件中获取要添加效果的元素并为其before或after伪元素添加新的样式。例如：

const divEl = document.querySelector("div");
const beforeEl = window.getComputedStyle(divEl, "before");

beforeEl.setProperty("background-color", "blue");
beforeEl.setProperty("width", "100px");

上述代码将获取到的div元素的before伪元素的背景颜色属性修改为蓝色，并将宽度增加到100px。

1. 可以将上述代码封装为一个函数，例如：

function addStyleToBefore(element, property, value) {
  const beforeEl = window.getComputedStyle(element, "before");
  beforeEl.setProperty(property, value);
}

示例说明：

1. 给下拉菜单的箭头添加动画效果

.dropdown:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent white transparent;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  transition: all 0.3s;
}

.dropdown.active:before {
  transform: translateY(-50%) rotate(180deg);
}

const dropdownEl = document.querySelector(".dropdown");

dropdownEl.addEventListener("click", function() {
  dropdownEl.classList.toggle("active");
});

上述代码为一个下拉菜单元素的before伪元素添加了一个箭头，并在其被点击时通过JS为其添加active类，触发箭头的旋转效果。

1. 为页面添加雪花飘落效果

body::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: white;
  position: fixed;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  animation: snow 1s linear infinite;
}

@keyframes snow {
  from {
    transform: translateY(-10px);
  }
  to {
    transform: translateY(100vh);
  }
}

const bodyEl = document.querySelector("body");
const numberOfSnowflakes = 20;

for (let i = 0; i < numberOfSnowflakes; i++) {
  const snowflake = document.createElement("div");
  snowflake.classList.add("snowflake");
  bodyEl.appendChild(snowflake);

  const randomLeft = Math.random() * window.innerWidth;
  const randomDelay = Math.random() * 5;
  const randomDuration = Math.random() * 10 + 5;

  addStyleToBefore(snowflake, "left", randomLeft + "px");
  addStyleToBefore(snowflake, "animation-delay", randomDelay + "s");
  addStyleToBefore(snowflake, "animation-duration", randomDuration + "s");
}

上述代码为页面的body元素的before伪元素添加了雪花的样式，并通过JS代码动态创建多个雪花元素，并为它们的before伪元素分别设置left、animation-delay、animation-duration属性，实现多个雪花呈现不同的速度和位置。