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) => (<CardStyledclassName="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;
`;