?【CSS3】CSS3 gradient transition with background-position
CSS3 gradient transition with background-position
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <style> #DemoGradient { background: -webkit-linear-gradient(#C7D3DC,#5B798E); background: -moz-linear-gradient(#C7D3DC,#5B798E); background: -o-linear-gradient(#C7D3DC,#5B798E); background: linear-gradient(#C7D3DC,#5B798E); -webkit-transition: background 1s ease-out; -moz-transition: background 1s ease-out; -o-transition: background 1s ease-out; transition: background 1s ease-out; background-size: 1px 200px; border-radius: 10px; border: 1px solid #839DB0; cursor: pointer; width: 150px; height: 100px; } #DemoGradient:hover { background-position: 100px; } </style> <div id="DemoGradient"></div> </body> </html>
?【CSS3】CSS3 gradient transition with background-position,古老的榕树,5-wow.com
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。