css伪类三角形点击动画切换

CSS伪类 `::before` 和 `::after` 可以用于创建元素的三角形形状，例如箭头或者指示方向。如果你想制作一个三角形并添加点击动画效果，可以这样做：

1. 首先，设置基础样式，包括三角形的位置、大小以及初始状态的颜色：

   .triangle {
     display: inline-block;
     position: relative;
     width: 0;
     height: 0;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 100px solid red; /* 或者你喜欢的颜色 */
   }

2. 然后，给三角形添加一个 :hover 伪类，改变颜色或动画效果，当鼠标悬停在三角形上时：

   .triangle:hover::before,
   .triangle:hover::after {
     animation: triangle-hover 0.3s ease-in-out;
     background-color: blue; /* 指定新的颜色 */
   }

   @keyframes triangle-hover {
     0% { transform: translateY(0); }
     50% { transform: translateY(-5px); }
     100% { transform: translateY(0); }
   }

这里我们定义了一个简单的垂直移动动画，模拟点击效果。