滚动公告(横向)
<!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>