Tạo cảm giác giả màu sắc sắc liên tiếp tới button 2018-05-21 03:45:00
Hiệu ứng giả màu sắc sắc liên tiếp tới button được Arlina dùng tới những button Demo/Download, bản thân thấy khá kỳ lạ nên Rip về.
Demo như bên dưới (đợi một khi nó có khả năng nối tiếp bị giả màu sắc sắc):
Hướng dẫn tạo nên cảm giác giả màu sắc sắc liên tiếp tới button
Thêm CSS
@-webkit-keyframes Gradient
0% background-position:0% 50%; 50% background-position:100% 50%; 100% background-position:0% 50%;
@keyframes Gradient
0% background-position:0% 50%; 50% background-position:100% 50%; 100% background-position:0% 50%;
.button list-style:none; text-align:center; border:0; margin:10px 0; clear:both; text-decoration:none;
.button li display:inline; margin:0 3px; padding:0; list-style:none;
.button li a.phác hoạ họa,.button li a.chuyên chở về display:block; position:relative; vertical-align:top; height:52px; line-height:52px; padding:0 30px; phông-size:16px; color:#fff; text-align:center; text-decoration:none; border-radius:3px; cursor:pointer; margin:như máy; box-shadow:0 10px 20px rgba(0,0,0,0.06),0 6px 6px rgba(0,0,0,0.09);
.button li a.phác hoạ họa background:linear-gradient(-45deg,#3aa4f3,#3aa4f3,#f28d47,#f28d47); background-size:400% 400%; animation:Gradient 15s ease infinite;
.button li a.chuyên chở về background:linear-gradient(-45deg,#f28d47,#f28d47,#3aa4f3,#3aa4f3); margin:20px như máy 0 như máy; background-size:400% 400%; animation:Gradient 15s ease infinite;
.button li a.phác hoạ họa:hover,.button li a.chuyên chở về:hover box-shadow:0 4px 5px rgba(0,0,0,0.06),0 1px 1px rgba(0,0,0,0.09);
HTML code
Data Tạo cảm giác giả màu sắc sắc liên tiếp tới button
2018-05-21 03:45:00 #Tạo #hiệu #ứng #giả #màu sắc #liên #tục #tới #button