【CSSサンプル】カーソルを載せると動くグラデーションバー
どうも！LSSです！！
また、なんか謎のCSSサンプルを作ってみました。
カーソルを載せると動くグラデーションバー
↑にマウスカーソルを載せてみてください。（スマホの方はタップ）
コード
<style><!--
.grdbar{
--gc1:#aaaaee;
--gc2:#bbbbee;
background-image:repeating-linear-gradient(135deg,var(--gc1) 0%,var(--gc1) 3%,var(--gc2) 6%,var(--gc1) 12%);
background-position:3000px 0px;
border-radius:5px;
padding:0px 10px;
transition:3s;
}
.grdbar:hover{background-position:0px 0px;}
--></style>
<div class="grdbar">カーソルを載せると動くグラデーションバー</div>
最後の
<div class="grdbar">中の一文</div>
が、バー本体になります。
これは同ページ中にいくつでも配置できます^^
色変更・移動量変更・変化時間変更について
コード中の、
.grdbar{
--gc1:#aaaaee;
--gc2:#bbbbee;
background-image:repeating-linear-gradient(135deg,var(--gc1) 0%,var(--gc1) 3%,var(--gc2) 6%,var(--gc1) 12%);
background-position:3000px 0px;
border-radius:5px;
padding:0px 10px;
transition:3s;
}
赤文字部分がグラデーションを構成する２つの色を指定している部分です。
緑文字部分が移動量を設定している部分、
青文字部分が移動にかかる時間を設定しています。
いずれも手軽に変更できます！
色変更が容易になるようにＣＳＳ変数なんぞ使ってみました^^
あとがき
なんか…CSSサンプル、作ろうとしたものと全く違うものが出来上がる事がよくあります。
これはこれで面白いかも、って思っちゃうと、そのまま出しちゃいますねｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
