ドットが線になるようなCSSアニメーションを実装する方法はありますか?純粋なCSSを使った線画アニメーション
point l (a dot) ---------------------------> point m (a line)
これはSVGで行うことができますが、純粋なCSSで実装できるかどうかを知りたいと思います。
ドットが線になるようなCSSアニメーションを実装する方法はありますか?純粋なCSSを使った線画アニメーション
point l (a dot) ---------------------------> point m (a line)
これはSVGで行うことができますが、純粋なCSSで実装できるかどうかを知りたいと思います。
Transition property
をCSS
に設定すると、width
というプロパティをターゲットに設定してdivに効果描画効果を与えることができます。
オレンジカラードットオン結果画面。あなたが必要な長さに成長する1ピクセルを持つ要素に境界線を使用することができ
.point {
width: 6px;
height: 6px;
background: tomato;
transition: width 1s ease;
}
.point:hover {
width: 200px;
}
<div class="point"></div>
。
@keyframes
とanimation
のプロパティを使用すると、ページの読み込みから開始することができます。
div{
height:0px;
width:1px;
border-bottom:1px solid #000;
-webkit-animation: increase 3s;
-moz-animation: increase 3s;
-o-animation: increase 3s;
animation: increase 3s;
animation-fill-mode: forwards;
}
@keyframes increase {
100% {
width: 300px;
}
}
<div></div>
あなたはそれをボーダー半径を与える必要があり私見:3px;それ以外の場合は、「それはドットではありません」というコメントが表示されます。 –