よく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に記述すれば、線が自動で動くアニメーションの出来上がり。
