html：<body><div id="box"><div id="div1"></div></div></body>css：<style>@keyframes test {from{left:0}to{left:-100%;}}#box{width:400px;height:50px;margin: 50px auto;position: relative;border: 1px solid #000;overflow: hidden;}#div1{width:200%;height:100%;position: absolute;left:0;top:0;background: -webkit-repeating-linear-gradient(-45deg, red 0px,red 10px,blue 10px,blue 20px);animation:4s test linear infinite;}</style>
相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
CSS3關於translate屬性的詳細介紹
CSS3關於background-size屬性的詳細介紹
CSS3實現旋轉光環效果的實現步驟
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
