과거에는 기본적으로 모든 사람들이 텍스트가 일정한 간격으로 위로 스크롤되는 효과를 얻기 위해 Javascript를 사용했습니다. 그래서 오늘은 이 효과를 얻기 위해 CSS3를 사용하는 방법을 알려 드리겠습니다.
말할 것도 없이 바로 예제 코드로 들어가겠습니다
<!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;} }</p> <p> @-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> <p> <p> <ul> <li>飞鲨勇士张超:曾驾歼-8战机逼退外军侦察机</li> <li>台媒炒作大陆军机飞临台海 台军方:全程监控</li> <li>菲总统对华为何晴转阴:先期待“访华”后欲“清算中国”</li> <li>外媒称韩国醉心中等强国地位 屡次在关涉中国时遇挫</li> <li>伊朗官方回应日本驻伊大使被扣押:没有的事儿</li> <li>菲总统对华为何晴转阴:先期待“访华”后欲“清算中国”</li> </ul> </p> </p> </body> </html>
위 내용은 모두의 학습에 도움이 되기를 바랍니다. !
관련 권장사항:
CSS 페이지에서 왼쪽, 중간, 오른쪽 열 레이아웃 구현
위 내용은 CSS3를 사용하여 정기적으로 위로 스크롤되는 텍스트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!