滚动播报效果的实现

最新推荐文章于 2023-05-06 13:48:17 发布

坏蛋呆呆

最新推荐文章于 2023-05-06 13:48:17 发布

阅读量1.8k

点赞数 1

分类专栏：解决方案文章标签：滚动效果走马灯效果前端效果

本文链接：https://blog.csdn.net/huaidandaidai1/article/details/98458213

版权

一、背景

业务需求：在网站头部的logo和用户登录状态中间，滚动播报后台设置的通知内容。

二、css实现

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3_MARQUEE</title>

    <style>
		*{margin: 0;padding: 0;}
		.wrap{height: 80px;width: 100%;background: cadetblue;display: flex;}
		.wrap div{font-family: "arial, helvetica, sans-serif";line-height: 80px;color: #fff;}
		.wrap .logo{font-size: 25px;font-weight: 600;float: left;padding: 0 20px 0 50px;}
		.date{width: 20%;float: right;box-sizing: border-box;padding: 0 20px;}
		.notice{
			float: left;
			width: 100%;
			overflow: hidden;
			position: relative;
		}
        .marquee{         
            white-space: nowrap;
            box-sizing: border-box;
			position: absolute;
            animation: marquee 50s linear infinite;
        }

        .marquee:hover {
            animation-play-state: paused
        }

        /* Make it move */
        @keyframes marquee {
            0%   { text-indent: 0% }
            100% { text-indent: -100% }
        }
    </style>
</head>
<body>
	<div class="wrap">
		<div class="logo"&g

最低0.47元/天解锁文章

坏蛋呆呆

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
滚动播报效果的实现

一、背景业务需求：在网站头部的logo和用户登录状态中间，滚动播报后台设置的通知内容。二、css实现效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="GBK"> <meta name="viewport" content="width=...
复制链接

扫一扫