一、效果图
二、实现方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animation</title> <style> body { background: #ccc; } .box { width: 300px; height: 8px; background: #17467f; border-radius: 4px; } .animation { height: 100%;
// 背景色渐变 background: linear-gradient(to right, rgba(14, 46, 95, 0) 33%, rgba(86, 239, 222, 0.27) 66%, rgba(0, 222, 255, 1) 100%); animation: mymove 3s infinite; border-radius: 4px; }
// div宽度从0到40%--自身长度伸缩; margin-left从0到60%--div位置的改变。
@keyframes mymove { from { width: 0; margin-left: 0; } to { width: 40%; margin-left: 60%; } } </style> </head> <body> <div class="box"> <div class="animation"></div> </div> </body> </html>