阿超 > css循环淡入淡出播放

css循环淡入淡出播放

2025-01-24

前端

令她反感的，远不是世界的丑陋，而是这个世界所戴的漂亮面具。——《不能承受的生命之轻》

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import React from "react";
import clsx from "clsx";
import styles from './index.module.css';
import Layout from "@theme/Layout";

function HomepageHeader() {
  return (
    <header className={clsx('hero', styles.heroBanner)}>
      <div className={clsx(styles.heroContainer)}>
        <img className={clsx(styles.heroBannerImg)} src="/brand-kit/homepage-programmer.webp"
             alt="Programmer"/>
        <div className={clsx(styles.heroTitleBanner)}>
          <h1 className="hero__title">
            <div>Manage Data in Petabytes</div>
            <div className={clsx(styles.heroTitleRounds)}>
              with{' '}
              <span className={clsx(styles.heroTitleRound)}>Massive Write</span>
              <span className={clsx(styles.heroTitleRound)}>Any Scale Read</span>
              <span className={clsx(styles.heroTitleRound)}>Flexible Schema</span>
            </div>
          </h1>
          <div className={clsx(styles.heroBtns)}>
            <a href="/contact" className={clsx(styles.heroBtn)}>Contact Us</a>
            <a href="/blog" className={clsx(styles.heroBtn)}>Blog</a>
          </div>
        </div>
      </div>
    </header>
  );
}

export default function Home(): React.JSX.Element {
  return (
    <Layout
      description="ScopeDB is a database built directly on top of S3 and unleashes the power of cloud elasticity and workload isolation.">
      <HomepageHeader/>
      <main/>
    </Layout>
  );
}

css如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/**
 * CSS files with the .module.css suffix will be treated as CSS modules
 * and scoped locally.
 */

.heroBanner {
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 996px) {
    .heroBanner {
        padding: 2rem;
    }
}

.buttons {
    display: flex;
    align-items: center;
    justify-content: center;
}

.heroContainer {
    display: flex;
}

.heroBannerImg {
    height: 700px;
}

.heroTitleBanner {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.heroTitleRounds {
    display: flex;
    width: 200px;
    overflow: visible;
}

.heroTitleRound {
    opacity: 0;
    animation: fadeInOut 9s infinite;
    white-space: nowrap;
    color: #3071a9;
}

.heroTitleRound:nth-child(1) {
    animation-delay: 0s;
}

.heroTitleRound:nth-child(2) {
    animation-delay: 3s;
}

.heroTitleRound:nth-child(3) {
    animation-delay: 6s;
}

@keyframes fadeInOut {
    0%, 33.33% {
        opacity: 1;
    }
    33.33%, 100% {
        opacity: 0;
        display: none;
    }
}

.heroBtns {
    display: flex;
    justify-content: center;
    gap: 10%;
    margin-top: 20px;;
    scale: 1.1;
}

.heroBtn {
    padding: 10px 16px;
    border-radius: 12px;
    margin: 5px;
    background: rgb(25 91 255);
    color: #fff;
    font-family: Poppins, sans-serif;
    transition: all .25s;
    cursor: pointer;
}

.heroBtn:hover {
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 20px -10px rgb(25 91 255);
    transform: translateY(-3px);
}