<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>doc</title> <style> *, *:before, *:after { box-sizing: border-box; } .pen { background-color: blue; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; } .panel { padding: 3rem; height: 50%; } .top { background-color: #3e69c3; background-image: url(http://scarbroughstudios.com/img/codepen.svg); background-position: center center; background-size: 500px; animation: scrollBad 5s linear infinite; } .bottom { background-color: #31cc70; overflow: hidden; position: relative; } .bottom .scroll { background-image: url(http://scarbroughstudios.com/img/codepen.svg); background-position: center center; background-size: 500px; position: absolute; top: 0px; left: 0px; height: 400%; width: 100%; z-index: 1; animation: scrollGood 5s linear infinite; } h1 { color: white; font-weight: 400; font-family: sans-serif; margin: 0; position: relative; z-index: 2; } @keyframes scrollBad { 0% { background-position: 0 0; } 100% { background-position: 0 -320px; } } @keyframes scrollGood { 0% { transform: translateY(0); } 100% { transform: translateY(-320px); } } </style> </head> <body> <h1>test</h1> <section class="pen"> <div class="panel top"> <h1>Animate: background-position</h1> </div> <div class="panel bottom"> <h1>Animate: translateY</h1> <div class="scroll"></div> </div> </section> </body> </html>
出处: https://wow.techbrood.com/fiddle/9614