Web

テキストの輪郭アニメーションの作り方

よくWEBサイトで、ロゴやイラストが自動的に動いて出現するアニメーションを目にします。

今回はその作り方と、簡単に生成できるサービスを紹介します。

SNGデータを作る。

illustratorが代表的ですが、
https://vectr.com/このようなサイトからのサービスも利用できます。

テキストツールでまずはテキストを入力します。

それをアウトライン化し、パスの状態にします。
できたらSVG保存してください。

SVGにCSSを適用

htmlファイルを用意し、そのhtmlファイルに、
SVGのコードを

までコピペします。
htmlに張り付けたSVGコードを囲うようにdivタグと、クラス名を付けます。

例)

  

さらに、SVGコードの 

.box{
width: 1060px;
height: 370px;
margin: 200px auto;
}
.path{
stroke:#092951;
fill:none;
stroke-width:1;
stroke-dasharray: 10;
}

.path{
stroke:#092951;
fill:none;
stroke-width:1;
stroke-dasharray: 3000;
stroke-dashoffset:3000;
animation: DASH 3s ease-in alternate forwards;
-webkit-animation:DASH 3s ease-in 0s forwards;
-o-animation:DASH 3s ease-in 0s forwards;
animation:DASH 3s ease-in 0s forwards;
}
@keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-moz-keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-webkit-keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-o-keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-ms-keyframes DASHf{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;
}

.bd{
width: 1060px;
height: 250px;
text-align: center;
position: relative;
padding: 60px 0;
}
div.bd div{
background: #092951;
position:absolute;
-webkit-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}

.bd div.bdT{
width: 100%;
height:1px;
top:0;
left:0;
}
.bd div.bdB{
width: 100%;
height:1px;
bottom:0;
right:0;
}
.bd div.bdR{
height:100%;
width :1px;
right:0;
top:0;
}
.bd div.bdL{
height:100%;
width :1px;
left:0;
bottom:0;
}

.active .bd div.bdT{
width: 100%;
height:1px;
top:0;
left:0;
}
.active .bd div.bdB{
width: 100%;
height:1px;
bottom:0;
right:0;
}
.active .bd div.bdR{
height:100%;
width :1px;
right:0;
top:0;
}
.active .bd div.bdL{
height:100%;
width :1px;
left:0;
bottom:0;
}
.bd div.bdT{
width: 0;
}
.bd div.bdB{
width: 0;
}
.bd div.bdR{
height:0;
}
.bd div.bdL{
height:0;
}

これをcssに記述すれば、線が自動で動くアニメーションの出来上がり。

サンプルを見る!

お問い合わせフォーム

気になる方はコチラからお問い合わせ!
必須お名前
必須メールアドレス
必須郵便番号
必須ご住所
必須電話番号
ご相談内容
必須メッセージ本文

コメントを残す

*