title: 'css旋转动画'
date: 2022-10-09 16:38:09
tags:

image_0.2865459501379348.gif

image_0.015742154289754007.gif

import React, { useState } from 'react';
import './rotatingMenu.scss';

const RotatingMenu = (props) => {
  const [isClick, setIsClick] = useState(false);
  return (
    <div className="rotatingMenu">
      <div
        className="rMenu"
        onClick={() => {
          setIsClick(!isClick);
        }}
      >
        <div className={`${isClick ? 'click' : ''}  rMenu_I`} />
      </div>
    </div>
  );
};

export default RotatingMenu;

css文件

.rotatingMenu {
  height: 100vh;
  background: rgb(255 255 0 / 12%);

  .rMenu {
    height: 100px;
    background: #c69797;
    position: relative;
  
    .rMenu_I {
      width: 40px;
      height: 5px;
      display: block;
      z-index: 1;
      border-radius: 2.5px;
      background: rgba(255, 255, 255, 0.7);
      transition: transform 0.5s, top 0.5s;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
    }
    .rMenu_I::after {
      width: 40px;
      height: 5px;
      display: block;
      z-index: 1;
      border-radius: 2.5px;
      background: rgba(255, 255, 255, 0.7);
      transition: transform 0.5s, top 0.5s;
      content: "";
      position: absolute;
      left: 0;
      top: -10px;
    }
    .rMenu_I::before {
      width: 40px;
      height: 5px;
      display: block;
      z-index: 1;
      border-radius: 2.5px;
      background: rgba(255, 255, 255, 0.7);
      transition: transform 0.5s, top 0.5s;
      content: "";
      position: absolute;
      left: 0;
     top: 10px;
    }
    .click {
        background: transparent;
    }
    .click::after {
      transform: rotate(-45deg);
      top: 0;
      width: 40px;
    }
    .click::before {
      transform: rotate(45deg);
      top: 0;
      width: 40px;
    }
  }
}

实现思路
1.首先实现三条线，其实只是div出中间的线，上线两条线是通过伪类 ::after和::before创建的，两条线一条top 10px,一条-10px,这样三条线就创建好了
2.肯定是要用到动画，这里用的是transition和transform ，transition可以帮我们实现动画，transform是用来实现元素的旋转
3.具体的动画实现：
a.点击元素后，中间的线通过背景为transparent，让他变为透明的
b.上面那条线也就是after创建的那个，通过transform: rotate(-45deg)让他逆时针旋转45度
c.同理下面那条线，让他瞬时间旋转45度，这样就会最终就有一个交叉的效果
d.这时候你就会发发现这个交叉，并没有完全变成'X'，这时候就需要我们把它俩的top设置为0，也就是让他俩位于中间线那个位置。

至于元素的恢复
则是通过 transition: transform 0.5s, top 0.5s;
通过transform和top进行恢复动画