Result
Font Awesomeのアイコンをアニメーションで変化するグラデーションカラーにする
例によってbackground-clipとtext-fill-colorを使用します
css
.element span {/*font-familyにFont Awesomeを指定してtransition設定しておく*/ color: #4a4a4e; text-decoration: none; transition: .2s; font-family: "Font Awesome 5 Free";}.element span:before {/*アイコンはフォントなのでテキストの形で切り抜く*/ font-family: "Font Awesome 5 Free"; font-size: 3rem; transition: .2s all; opacity: 1; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: Gradient 1s ease-in-out infinite; background-size: 200% 200%;}/*要素毎にアイコンとグラデーションカラーを指定していく*/.element .obj,.element .obj:before{ content: "\f25b";}.element .obj:before{ background-color: #FA8BFF; background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);}.element .foo,.element .foo:before{ content: "\f2b9";}.element .foo:before{ background-color: #ddd; background-image: linear-gradient(45deg, #aaa 0%, #555 52%, #000 90%);}.element .bar,.element .bar:before{ content: "\f28d"}.element .bar:before{ background-color: red; background-image: linear-gradient(45deg, orange 0%, yellow 52%, #ffd700 90%);}.element .hoge,.element .hoge:before{ content: "\f2d0"}.element .hoge:before{ background-color: #ddd; background-image: linear-gradient(45deg, #895b8a 0%, #f6bfbc 52%, #80aba9 90%);}.element .huga,.element .huga:before{ content: "\f2bd"}.element .huga:before{ background-color: #ddd; background-image: linear-gradient(45deg, #4169e1 0%, #1e90ff 52%, #add8e6 90%);}.element .piyo,.element .piyo:before{ content: "\f059"}.element .piyo:before{ background-color: #ddd; background-image: linear-gradient(45deg, #00ff7f 0%, #00ff00 52%, #6b8e23 90%);}/*設定したグラデーションのポジションをアニメーションで変化させる*/@keyframes Gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }} |
CSSが長く見えますが、基本設定箇所は多くありません
html
<div class="element relative pa3 flex items-center justify-center"> <span class="obj "></span> <span class="foo"></span> <span class="bar"></span> <span class="hoge"></span> <span class="huga"></span> <span class="piyo"></span></div> |
