css3png图片渐变动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>{$title}</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" /> <meta name="format-detection" content="telephone=no" /> <!-- Link Swiper's CSS --> <include file="commonheader" /> <style> .dv { width: 1000px; height: 300px; margin: 0 auto; margin-top: 100px; font-size: 80px; text-align: center; background: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96); background-size: 200% 100%; -webkit-mask: url(/zhongliangchangtu/images/fanhuibtn.png) no-repeat; -webkit-mask-size:1000px 300px; animation: masked-animation 1s infinite linear; } @-webkit-keyframes masked-animation { 0% { background-position: 0 0; } 100% { background-position: -100% 0; } } </style> </head> <body> <div class="dv"></div> </body> </html>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/18869.html