CSS 如何做滚动字幕效果? 下面本篇文章给大家介绍一下使用 CSS 做滚动字幕效果的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
在 CSS 中, 可以利用 animation 属性和 @keyframes 规则, 配合 top 属性来实现滚动字幕效果.
话不多说, 直接上实例代码
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- moveUp
- </title>
- <style>
- ul,li { margin: 0; padding: 0; } li { list-style: none; } .container {
- display: inline-block; background: #efefef; padding: 10px; border: 1px
- solid #ccc; font-family: "Microsoft YaHei"; } .container .li-box { height:
- 28px; overflow: hidden; } .container ul { position: relative; animation:
- moveUp 8s 0.6s infinite; -webkit-animation: moveUp 8s 0.6s infinite; }
- @keyframes moveUp { 0% { top: 0px; } 18% { top: 0px; } 20% { top: -28px;
- } 38% { top: -28px; } 40% { top: -56px; } 58% { top: -56px; } 60% { top:
- -84px; } 78% { top: -84px; } 80% { top: -112px; } 98% { top: -112px; }
- } @-webkit-keyframes moveUp /*Safari and Chrome*/ { 0% { top: 0px; } 18%
- { top: 0px; } 20% { top: -28px; } 38% { top: -28px; } 40% { top: -56px;
- } 58% { top: -56px; } 60% { top: -84px; } 78% { top: -84px; } 80% { top:
- -112px; } 98% { top: -112px; } } .container li { line-height: 1.8; color:
- #666; }
- </style>
- </head>
- <body>
- <div>
- <div>
- <ul>
- <li>
- 滚动字幕 1
- </li>
- <li>
- 滚动字幕 2
- </li>
- <li>
- 滚动字幕 3
- </li>
- <li>
- 滚动字幕 4
- </li>
- <li>
- 滚动字幕 5
- </li>
- <li>
- 滚动字幕 6
- </li>
- </ul>
- </div>
- </div>
- </body>
- </HTML>
效果图:
更多 Web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/16557.html