純css文字由下向上輪播
阿新 • • 發佈:2018-12-07
<!doctype html> <html> <head> <meta charset="utf-8"> <title>純Css文字輪播輪播-jq22.com</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> .div1 { width:200px; height:200px; overflow:hidden; margin:auto; position:relative; } @keyframes anis { 100% { transform:translateY(-200px) } }img { position:absolute; } .div2 { animation:anis 10s linear infinite; } .div2:hover { animation-play-state:paused; } </style> </head> <body> <div class="div1"> <div class="div2"> <p>111111111111111111111</p> <p>211111111111111111111</p> <p>311111111111111111111</p> <p>411111111111111111111</p> <p>511111111111111111111</p> <p>611111111111111111111</p> <p>711111111111111111111</p> <p>2211111111111111111111</p> <p>331111111111111111111</p> <p>441111111111111111111</p> <p>551111111111111111111</p> <p>661111111111111111111</p> <p>771111111111111111111</p> <p>881111111111111111111</p> <p>991111111111111111111</p> <p>001111111111111111111</p> </div> </div> </body> </html>