zoukankan      html  css  js  c++  java
  • 滚动公告(横向)

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			.marquee {
    				 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;
    				 .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;
    				 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>
    
  • 相关阅读:
    Pythonday01
    PYTHON_DAY2
    PYTHON_DAY3
    数据字典生成SQL语句
    Spring cloud Netflix >readMe
    SecureCRT的安装与激活
    MyBatis映射文件UserMapper.xml(mysql环境)
    数据库模糊查询4种用法
    MyBatis配置文件myBatisconfig.xml
    计算机基础:2进制和2进制算法。
  • 原文地址:https://www.cnblogs.com/gxywb/p/10024559.html
Copyright © 2011-2022 走看看