纯CSS写的一个动态效果，开始看着这个不知道怎么写的，实际上上是小盒子里面有一个大盒子，使用定位和动画完成的
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style-type: none; } .wrap{ position:relative; width: 400px; height: 400px; margin: 0 auto; border: 1px solid #ff6700; } .inner{ position: absolute; z-index: 5; color: red; width: 400px; height: 400px; line-height: 200px; font-size: 150px; letter-spacing: 20px; text-align: center; } .box{ background-color: #f00; overflow: hidden; z-index: 100; position: absolute; top: 0; left: 0; width: 200px; height: 200px; animation:hezi 2s linear infinite; } @keyframes hezi{ 0%{left: 0;top: 0;} 25%{left: 200px;top: 0;} 50%{left: 200px;top:200px} 75%{left: 0;top: 200px;} 100%{left: 0;top: 0;} } .innerBox{ position: absolute; color: white; z-index: 500; width: 400px; height: 400px; line-height: 200px; font-size: 150px; letter-spacing: 20px; text-align: center; animation: txt 2s linear infinite; } @keyframes txt{ 0%{left: 0;top: 0;} 25%{left: -200px;top: 0;} 50%{left: -200px;top:-200px} 75%{left: 0;top: -200px;} 100%{left: 0;top: 0;} } </style> </head> <body> <div class="wrap"> <div class="inner"> 贪玩蓝月 </div> <div class="box"> <div class="innerBox"> 贪玩蓝月 </div> </div> </div> </body> </html>