React有趣的标题动效（rc-banner-anim、rc-tween-one）

最新推荐文章于 2024-06-04 10:05:35 发布

LanM蓝莓

最新推荐文章于 2024-06-04 10:05:35 发布

阅读量987

点赞数

分类专栏： JS 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/BLUESKYwang66/article/details/127772380

版权

JS 专栏收录该内容

19 篇文章 4 订阅

订阅专栏

首先看一下效果

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>
	)
}