113日目 | web制作

本日は…

■SVGで文字をアニメーションさせてみる

・Aiで文字を書き出す
　→アウトラインにしてグループ解除
　→SVGにして書き出す

※そのままロゴなどに使いたいときは、このファイルにリンクさせてやればいい
※今回はアニメーションさせたいので、SVGタグの中身だけ取り出してｃｓｓで加工します

body {
	background: #092951;
}
.box {
	width: 500px;
	margin: 200px auto;
	height: 400px;
}

.bd {
	width: 500px;
	height: 300px;
	text-align:center;
	position: relative;
	padding: 60px 0;
}
div.bd div {
	backgrounf:#fff;
	position: absolute;
	transition: all .3s ease-in-out .3s;
}
.line {
	stroke: #fff;/*線の色*/
	stroke-width: 1;/*線の太さ*/
	fill: #092951;/*塗りつぶしの色*/
	stroke-dasharray: 3000;/*破線の間隔*/
	stroke-dashoffset: 3000;/*破線の開始位置*/
	-webkit-animation:DASH 2s ease-in-out 1s forwards;
	animation:DASH 2s ease-in-out 1s forwards;
}

@-webkit-keyframes DASH {
  0%{ stroke-dashoffset:3000;fill:#092951;}
  80%{ stroke-dashoffset:2000;fill:#092951;}
  100%{ stroke-dashoffset:0;fill:#fff;}
}
@keyframes DASH {
  0%{ stroke-dashoffset:3000;fill:#092951;}
  80%{ stroke-dashoffset:2000;fill:#092951;}
  100%{ stroke-dashoffset:0;fill:#fff;}
}

とりあえずはこれで動く。はず。