css实现左右滚动字幕通知消息代码
代码语言:html
所属分类:其他
代码描述:css实现左右滚动字幕通知消息代码,支持图文滚动进入,鼠标悬浮停止。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /* ---------------------------- */ /* Défilement de droite à gauche */ .marquee-rtl { overflow: hidden; /* important */ width:50%; max-width: 30em; /* A ADAPTER */ } .marquee-rtl > div { display: inline-block; /* important */ white-space: nowrap; /* important */ animation: defilement-rtl 15s infinite linear; /* défilement */ cursor: pointer; padding: 10px 2em 10px 100%; } .marquee-rtl:hover > div { animation-play-state: paused; /* met en pause le défilement */ } .marquee-rtl > div:first-letter { font-weight: 700; color: #F00; } @keyframes defilement-rtl { 0% { -webkit-transform: translate(0); transform: translate(0); } 100% { -webkit-transform: translate(-100%); transform: translate(-100%); } } /* ---------------------------- */ /* texte sur plusieurs lignes automatiquement */ .marquee-multi-lignes > div { width:90%; white-space: normal; /* important */ } /* ---------------------------- */ /* déco */ h2, p { text-align:center; } .marquee-rtl { margin: 2em auto; border: 10px sol.........完整代码请登录后点击上方下载按钮下载查看
网友评论0