首先看一下效果
CSS部分
.banner-user-elem {
text-align: center;
color: #fff;
overflow: hidden;
}
.banner-bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.banner-title {
font-size: 28px;
top: 28%;
display: flex;
align-items: center;
justify-content: flex-start;
margin-left: 24px;
}
.banner-text {
top: 20%;
}
.header {
height: 100;
position: relative;
overflow: hidden;
}
.root {
width: 100%;
height: 100%;
}
JSX部分
import React from "react"
import BannerAnim, { Element } from "rc-banner-anim"
import TweenOne from "rc-tween-one"
import "./Fourteen.css"
import "rc-banner-anim/assets/index.css"
import AppsIcon from "@mui/icons-material/Apps"
const BgElement = Element.BgElement
const Banners = [
{
background: "linear-gradient(-45deg, #536dfe 0%, #536dfe 100%)",
},
{
background: "linear-gradient(-45deg, #3f51b5 0%, #3f51b5 100%)",
},
]
export default function Fourteen() {
return (
<div className="root">
<div className="header">
<BannerAnim arrow={false} thumb={false} autoPlay>
{Banners.map((b, i) => (
<Element prefixCls="banner-user-elem" key={i}>
<BgElement className="banner-bg" key="bg" style={{ background: b.background }} />
<TweenOne className="banner-title" animation={{ y: 30, opacity: 1, type: "from" }} style={{ display: "flex" }}>
<AppsIcon style={{ fontSize: 32, marginRight: 4, marginTop: 4 }} />
蓝莓平台
</TweenOne>
</Element>
))}
</BannerAnim>
</div>
</div>
)
}