滚动公告（横向） 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.marquee {
				width: 1170px;
				margin: 0 auto;
				overflow: hidden;
				white-space: nowrap;
				box-sizing: border-box;
				animation: marquee 50s linear infinite;
			}
			
			.marquee:hover {
				animation-play-state: paused
			}
			/* Make it move */
			
			@keyframes marquee {
				0% {
					text-indent: 27.5em
				}
				100% {
					text-indent: -105em
				}
			}
			/* Make it pretty */
			
			.microsoft {
				padding-left: 1.5em;
				position: relative;
				font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
				color: rgb(102, 102, 102);
				background: rgb(255, 248, 233) none repeat scroll 0% 0%;
			}
			/* ::before was :before before ::before was ::before - kthx */
			
			.microsoft:before,
			.microsoft::before {
				z-index: 2;
				content: '';
				position: absolute;
				top: -1em;
				left: -1em;
				width: .5em;
				height: .5em;
				/*box-shadow: 1.0em 1.25em 0 #F65314, 1.6em 1.25em 0 #7CBB00, 1.0em 1.85em 0 #00A1F1, 1.6em 1.85em 0 #FFBB00;*/
				/*background: url(img/horn.png);*/
			
			}
			
			.microsoft:after,
			.microsoft::after {
				z-index: 1;
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 1.4em;
				height: 1.4em;
				/*background: #FFF8E9;*/
				background: #FFF8E9 url(img/horn.png)no-repeat center;
				background-size:18px 18px ;
				
			}
		</style>
	</head>

	<body>
		<p class="microsoft marquee">
			味多美部分产品涨价通知:    
   
尊敬的顾客：非常感谢您对味多美公司长期的信赖与支持，我司本着质量第一，顾客至上的原则，多年来为顾客提供高品质的产品和服务，获得了广大消费者的认可。由于房租、人工、原材料成本持续上涨，我司对部分产品进行调价。此次调价实属无奈，希望得到您的谅解与支持，特此通知！       
北京味多美食品有限责任公司
2018.11.25
		</p>
	
	</body>

</html>

 

posted @ 2018-11-27 09:38  webxy  阅读(1342)  评论(0)    收藏  举报