CSSでのアニメーションで、簡単に動きを表現できるようになったホームページ制作ですが、自由度が高くなる一方難易度も上がっているように感じます。
でも、アニメーションを全く使わないwebサイトよりは、少しの箇所でもアニメーション処理があるだけでなんだか見ていて楽しくなる事は間違いありません。
もちろん、やり過ぎてウザくなる場合もあるので、どういうアニメーションをセットすればいいかというのは、デザインセンスに委ねられます。
でもあまり、ホームページで使えるアニメーションを紹介しているサイトは少ないので、そういうサイトがあれば、是非利用したいと思います。
いや、世の中に無いのであれば、自分で作るしかないでしょう。
というわけで、ホームページで使えそうなアニメーションを日々積み上げていきたいと思います。（不定期ですが・・・）
初回の今回は、border-trace-moveという命名で、ある要素のborderを沿って光点が移動するようなイメージで作ってみました。
ソースコード
index.html
<link rel='stylesheet' href='border-trace-move.css'/>
<div id='box'></div>
border-trace-move.css
html,body{
width:100%;
height:100%;
}
body{
display:flex;
align-items:center;
justify-content:center;
}
#box{
width:300px;
height:300px;
border:1px solid black;
position:relative;
}
#box::before{
--size:15px;
--bg:rgba(255,0,0,0.8);
content:'';
display:block;
width:var(--size);
height:var(--size);
border-radius:50%;
background-color:var(--bg);
box-shadow:0 0 calc(var(--size) / 2) var(--bg);
transform:translate(-50%,-50%);
position:absolute;
left:0;
top:0;
animation: 3.0s ease-in 0s infinite normal excursion;
}
@keyframes excursion{
0%{
top:0;
left:0%;
}
25%{
top:0;
left:100%;
}
50%{
top:100%;
left:100%;
}
75%{
top:100%;
left:0;
}
100%{
top:0;
left:0;
}
}
デモ
ノーマルパターン
タイトル文字の周りを回遊
※文字をマウスにのせると回遊表示します。要素を回遊する衛生のようなイメージ
