CSS | 集中線を作成する方法
CSSだけで集中線を引くデザインサンプルコードです。
集中線を回転させるCSSアニメーションについても紹介しています。
See the Pen CSS | Saturated line by yochans (@yochans) on CodePen.
集中線のサンプルコードと説明
HTML
HTMLにはコンテナと集中線を描くdiv要素を用意しています。
<div class="container">
<div class="concentration-line"></div>
</div>コンテナ
コンテナのサイズは自由に変更しても問題ありません。
横幅にあわせてアスペクト比を固定する場合はheightを「100vw」を指定するかpadding-topを使います。
集中線の部分はコンテナのサイズより大きくなりますので「overflow: hidden」ではみ出る部分を非表示にしています。
集中線の回転の中心点は「display: flex」を指定「justify-content: center」と「align-items: center」で縦横中央に揃えています。
回転の中心点の位置を調節したい場合は、positionプロパティを使った方が良いかもしれません。
.container {
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}集中線
集中線の部分は、repeating-conic-gradient()で作成しています。
線の伸びを正円にするため、コンテナとは異なり、サイズを正方形にしています。
透過から指定色の1セット分でもサンプルと大きな変化はありません。
repeating-conic-gradient(transparent 0 10deg, #4169e1 5deg 20deg);サンプルでは線がギザギザになってしまうのを抑える為に、境界を少しだけボケるようにしていて、透過から指定色、透過を1セットにしています。
1degではぼやけ過ぎますので、0.2degを指定しています。
※角度を指定する単位のdegは小数点以下の数値も反映されます
-webkit-mask-imageで中央にまで伸びている線をマスク処理しています。
.concentration-line {
width: 100%;
height: 100vw;
background: repeating-conic-gradient(transparent 0 5deg, #4169e1 5.2deg 10deg, transparent 10.2deg 15deg);
-webkit-mask-image: radial-gradient(transparent 0% 2%, #FFF 30%);
}回転アニメーション
回転アニメーションを付ける場合は、回転した際に要素のサイズより小さくなってしまう部分がありますので、widthとheightを調節する必要があります。
transformのscale()を使った拡大でも可能ですが、線のギザギザが荒くなってしまいました。
animationプロパティはlinear（一定のスピード）、infinite（繰り返し実行）を指定しています。
.concentration-line {
width: 100%;
height: 100vw;
background: repeating-conic-gradient(transparent 0 5deg, #4169e1 5.2deg 10deg, transparent 10.2deg 15deg);
-webkit-mask-image: radial-gradient(transparent 0% 2%, #FFF 30%);
animation: rotate-anim 20s linear infinite;
}@keyframesは、シンプルにtotate()で360度回転させているだけです。
@keyframes rotate-anim {
100% {
transform: rotate(360deg);
}
}※集中線の回転アニメーションについて、現状、納得のいってない記述・指定内容となっておりベストな指定方法を模索中です。