鼠标滑过实现挂板围绕某一点来回旋转的效果

Michael_Cheng_09

已于 2023-09-18 21:38:33 修改

阅读量52

点赞数

文章标签：前端 javascript

于 2023-09-18 21:35:27 首次发布

本文链接：https://blog.csdn.net/zihang_cheng/article/details/132997927

版权

         {fillArray(mockList, 10).map((el, index) => {
            return (
              <div className={`${css.eachBoard}`} key={index}>
                <div
                  className={classNames({
                    ['tsc_dash_eachOne']: true,
                    [css[pinStyleMap[index]]]: !!el,
                    [css.pinCenter]: !!el && !pinStyleMap[index],
                  })}
                >
                  {el && renderBoardContent(el, index)}
                </div>
              </div>
            );
          })}

  const elms = document.getElementsByClassName('tsc_dash_eachOne');

  useEffect(() => {
    for (let i = 0; i <= elms.length; i++) {
      elms[i] &&
        (elms[i].addEventListener('animationend', function (e) {
          elms[i].classList.remove('rotateAnimate');
        }),
        elms[i].addEventListener('mouseover', function (e) {
          elms[i].classList.add('rotateAnimate');
        }));
    }
  }, [elms]);

.pinLeft {
  width: 100%;
  height: 100%;
  background-image: url(../../assets/boardLeft.png);
  background-size: 100% 100%;

  transform-origin: calc(50% - 11px) 11px;

  .list,
  .title {
    left: 30px;
  }
}

.pinCenter {
  width: 100%;
  height: 100%;
  background-image: url(../../assets/boardCenter.png);
  background-size: 100% 100%;

  transform-origin: calc(50%) 13px;

  .list {
    width: 65%;
  }
}

.pinRight {
  width: 100%;
  height: 100%;
  background-image: url(../../assets/boardRight.png);
  background-size: 100% 100%;

  transform-origin: calc(50% - -10px) 15px;
}


:global(.rotateAnimate) {
  animation: myRotate 2s ease-in-out;
}

.rotateAnimate :global {
  animation: myRotate 2s ease-in-out;
}

@keyframes myRotate {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-20deg);
  }
  40% {
    transform: rotate(15deg);
  }
  60% {
    transform: rotate(-10deg);
  }
  80% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0);
  }
}