<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="bg_wave"></div> </div> </div>

.bg_wave{ content:""; height: 46px; position: relative; background: url(http://welldesign.in/wave.png) repeat-x; left: 0px; width: 100%; top:50px;; } @media (max-width:991px){ .news .bg_wave{ top: -144px; } } @media (max-width:481px){ .news .bg_wave{ top: -144px; } } @media (max-width:361px){ .news .bg_wave{ top: -144px; } } @media (max-width:321px){ .news .bg_wave{ top: -144px; } } .bg_wave{ animation: waveanime 10s linear 1s infinite; /* -webkit-animation: waveanime 10s linear 1s infinite;*/ -moz-animation: waveanime 10s linear 1s infinite; -webkit-animation-name:'waveanime'; -webkit-animation-duration: 10s;/*動畫時間*/ -webkit-animation-timing-function: ease-in-out; /*動畫，和transition-timing-functionæ˜¯ä¸€æ ·çš„*/ -webkit-animation-delay: 1s;/*動畫延遲*/ -webkit-animation-iteration-count: infinite;/*定義循環資料，infiniteä¸ºæ— é™æ¬¡*/ } @keyframes waveanime{ 0% {background-position:0 0;} 100% {background-position:800px 0;} } @-webkit-keyframes waveanime{ 0% {background-position:0 0;} 100% {background-position:800px 0;} }