實(shí)現(xiàn)效果
// jsx
import React from 'react';
import classes from 'classnames';
import iconLoudspeaker from '../../assets/icon-loudspeaker.png';
import styles from './index.module.scss';
const NotificationBar = ({
notifications = [],
icon,
className,
imageWrapperClassName,
notificationClassName,
...restProps
}) => {
return (
<div className={classes(styles.notificationBar, className)} {...restProps}>
<div className={classes(styles.imageWrapper, imageWrapperClassName)}>
<img src={iconLoudspeaker} alt="" />
</div>
<div className={styles.container}>
{notifications.map((notification) => (
<div className={classes(styles.notification, notificationClassName)}>
{notification}
</div>
))}
</div>
</div>
);
};
export default NotificationBar;
.notificationBar {
width: 100%;
height: 26px;
background-color: #FFF4E5;
display: flex;
align-items: center;
position: relative;
.imageWrapper {
height: 26px;
position: absolute;
display: flex;
align-items: center;
left: 0;
z-index: 1;
background-color: #FFF4E5;
padding-left: 11px;
padding-right: 6px;
img {
width: 14px;
}
}
.container {
height: 26px;
position: relative;
overflow-x: hidden;
display: flex;
align-items: center;
.notification {
padding-left: 20px;
padding-right: 60px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: var(--text-color-orange);
display: inline-block;
white-space: nowrap;
animation: 15s wordsLoop linear infinite normal;
}
}
}
@keyframes wordsLoop {
0% {
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
@-webkit-keyframes wordsLoop {
0% {
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
