精美卡片拖拽仿3D效果

3D效果 ​​https://micku7zu.github.io/vanilla-tilt.js/index.html​​​ 体验地址 ​​https://hongbin.xyz/home​​

import { FC, ReactElement, useEffect } from "react";
import styled, { keyframes } from "styled-components";
import { randomColor } from "../BUI/DateTimePicker/utils";
import "../../constant/VanillaTilt";

interface IProps {}

const initialData: { title: string; content: string; desc?: string }[] = [
  { title: "极客精神", content: "好奇之心", desc: "改变之力" },
  { title: "开源精神", content: "开创", desc: "共享" },
  { title: "终身学习", content: "学无止境", desc: "不断探索" },
  { title: "团队精神", content: "相信自己", desc: "相信伙伴" },
];

const Quality: FC<IProps> = (): ReactElement => {
  useEffect(() => {
    VanillaTilt.init(document.querySelectorAll(".qualityCard"));
  }, []);

  return (
    <Wrap>
      {initialData.map((item, index) => (
        <CardStyled
          className="qualityCard"
          style={{
            //   @ts-ignore
            "--after-bgc": `${randomColor()}cc`,
            //   @ts-ignore
            "--before-bgc": `${randomColor()}cc`,
            //   @ts-ignore
            "--before-duration": `${5 + Math.floor(Math.random() * 10)}s`,
            //   @ts-ignore
            "--after-duration": `${5 + Math.floor(Math.random() * 10)}s`,
          }}
          key={item.title}
        >
          <Index>0{index + 1}</Index>
          <Title>{item.title}</Title>
          <Content>
            {item.content}
            {item.desc ? (
              <>
                <br />
                {item.desc}{" "}
              </>
            ) : null}
          </Content>
        </CardStyled>
      ))}
    </Wrap>
  );
};

export default Quality;

const Content = styled.article`
  color: #fffae5;
  font-size: 1.5rem;
  text-align: center;
  font-weight: bold;
  transition: opacity 0.2s linear, transform 0.3s linear,
    text-shadow 0.3s linear;
  opacity: 0;
  transform: translateY(5rem);
`;

const Title = styled.p`
  font-size: 2rem;
  color: #777;
  text-shadow: 1px 1px #ccc;
  letter-spacing: 7px;
  text-align: right;
  font-weight: bolder;
  margin-top: 6rem;
  transition: all 0.3s linear;
`;

const Index = styled.strong`
  font-size: 5rem;
  color: #777;
  position: absolute;
  right: 0;
  top: 0;
  text-shadow: 2px 2px #ccc;
  letter-spacing: 7px;
  transition: all 0.3s linear;
`;

const downAnimate = keyframes`
0%{transform: translate(0px,0px) };
30%{transform: translate(0.9rem,0.9rem) };
60%{transform: translate(-0.9rem,-0.9rem) };
100%{transform: translate(0px,0px) };
`;

const CardStyled = styled.div`
  width: 15rem;
  height: 18rem;
  border-radius: 1rem;
  margin: 1rem 0;
  position: relative;
  font-family: fantasy;
  transition: background 0.3s linear;
  background: #96969644;
  ${props => props.theme.backdropFilter || props.theme.replaceBDFilter};
  border-top: #999 2px solid;
  border-left: #aaa 2px solid;
  border-right: #999 2px solid;
  border-bottom: #aaa 2px solid;
  overflow: hidden;

  ::before {
    content: "";
    position: absolute;
    width: 6rem;
    height: 6rem;
    z-index: -1;
    border-radius: 6rem;
    background-color: var(--before-bgc);
    top: -2rem;
    left: -2rem;
    animation: ${downAnimate} var(--before-duration) linear infinite;
  }
  ::after {
    content: "";
    position: absolute;
    width: 10rem;
    height: 10rem;
    z-index: -1;
    border-radius: 10rem;
    background-color: var(--after-bgc);
    right: -2rem;
    bottom: -2rem;
    animation: ${downAnimate} var(--after-duration) linear infinite;
  }

  :hover {
    background: #18171794;
    ${Content} {
      opacity: 1;
      transform: translateY(0);
      text-shadow: 1px 1px #ccc;
    }
    ${Index},${Title} {
      transform: translateY(-1rem);
      color: #d3d0c3;
    }
  }
`;

const Wrap = styled.div`
  width: 100%;
  display: flex;
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
`;