一个 react 写的 文字 Logo 气泡特效

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

这个特效主要是使用 css3 实现，效果就是如图气泡漂浮的效果，平常项目中写的玩玩的，写的不好，在这里分享给大家，希望以后能够在这里和大家一起讨论学习

效果

首先我么先看一下实现的效果，如下图所示：

使用的主要的技术栈

react、ts、css3、styled-components

css 部分代码

import styled from 'styled-components';

export const TextWrap = styled.div`
  text-align: center;
  cursor: pointer;
`;

export const Bubble = styled.div`
  position: relative;
  .particle {
    opacity: 0;
    position: absolute;
    background-color: rgba(33, 150, 243, 0.5);
    -webkit-animation: bubbles 3s ease-in infinite;
    animation: bubbles 3s ease-in infinite;
    border-radius: 100%;
  }
  @-webkit-keyframes bubbles {
    0% {
      opacity: 0;
    }
    20% {
      opacity: 1;
      -webkit-transform: translate(0, -20%);
      transform: translate(0, -20%);
    }
    100% {
      opacity: 0;
      -webkit-transform: translate(0, -1000%);
      transform: translate(0, -1000%);
    }
  }
  @keyframes bubbles {
    0% {
      opacity: 0;
    }
    20% {
      opacity: 1;
      -webkit-transform: translate(0, -20%);
      transform: translate(0, -20%);
    }
    100% {
      opacity: 0;
      -webkit-transform: translate(0, -1000%);
      transform: translate(0, -1000%);
    }
  }
`;

export const Text = styled.div`
  width: 100px;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  line-height: normal;
  align-items: center;
  color: #fff;
  font-weight: bold;
`;

tsx 代码

import { FC } from 'react';
import { TextWrap, Bubble, Text } from './styled';
import { useNavigate } from 'react-router-dom';

interface Props {
  path?: string;
  title: string;
  subTitle?: string;
}

export const Logo: FC<Props>= (props) => {
  const { path, title, subTitle } = props;
  const navigate = useNavigate();
  const rnd = function (m: string, n: string){
    const m1 = parseInt(m);
    const n1 = parseInt(n);
    return Math.floor(Math.random() * (n1 - m1 + 1)) + m1;
  }

  const CreateBubbles = function() {
    const bubbleCount = 20;
    let dom = [];
    for (let i = 0; i <= bubbleCount; i++) {
      const size = rnd('6', '12');
      const top = rnd('20', '80') + '%';
      const left = rnd('0', '95') + '%';
      const width = size + 'px';
      const height = size + 'px';
      const animation = rnd('0', '30') / 10 + 's';
      const style = {
        top: top,
        left: left,
        width: width,
        height: height,
        animationDelay: animation,
      };
      dom.push(<span className="particle" style={style} key={i}></span>);
    }
    return (
      <>
        {...dom}
      </>
    );
  }

  const go = function() {
    path ? window.location.href = path : '';
  }

  return (
    <>
      <TextWrap onClick={go}>
        <Bubble>
          <CreateBubbles />
          <Text>
            <span>{title}</span>
            <span>{subTitle}</span>
          </Text>
        </Bubble>
      </TextWrap>
    </>
  );
};

使用方法

其中属性 path 是点击的时候要跳转的地址，title 是一级标题，subTitle 是小标题。

<Logo path='/' title='TRUNK' subTitle='LOGO'/>