光るボタンよくサイトで使われています。難しいと思ってませんか?
実は簡単に実装できるんです。
コピペでいけるソースコードをまとめましたので、
よかったらご覧ください。
aタグにshineとういうクラスを追加ください。
■CSS
a.test { text-align: center; display :block; padding: 1em; color: #FFF; background: linear-gradient( 0deg , #970000 0%, #4e0000 100%); text-decoration: none; position: relative; } .shine { overflow: hidden; } .shine::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: -100%; background: linear-gradient(135deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0.75) 32%, rgba(255, 255, 255, 0.75) 78%, rgba(255, 255, 255, 0) 82%); animation: shine-loop 4s linear infinite; } @keyframes shine-loop { 0% { transform: translateX(0); } 10% { transform: translateX(200%); } 100% { transform: translateX(200%); } }
どうでしたか?簡単でしょ?
数値を変更して自分好みにカスタマイズしてOK
楽してコーディングしていきましょう!