WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

SVGでアニメーション

f:id:mmmmofu:20150821223724p:plain

SVGとは…Scalable Vector Graphics(スケラブル ベクター グラフィックス)
ベクターデータ。引き延ばしても縮めても荒れない。

Illustratorで文字を打つ
打った文字を選択してアウトラインを作成し、グループを解除する。
別名で保存する
形式をSVGにして保存
保存したSVGをDreamweaverで開き、<svg…></svg>となっている部分をコピーし、新規htmlファイルに貼り付ける。
heightは横幅によって拡大縮小してくれるので取ってしまっても良い。
<svg…></svg>の中の<path…>が一文字分(一つのパス)データ
このpathにクラス名lineを追加する。
</svg>の下に
<div class="bdT"></div>
<div class="bdB"></div>
<div class="bdR"></div>
<div class="bdL"></div>
を記述する。
全体を<div class="box">その中に<div class="bd">で囲う。

svgのpathはプロパティを使ってスタイルを指定できる。
stroke:線の色
stronke-width:線の太さ
fill:塗りつぶしの色
stroke-dasharray:破線の間隔
stroke-dashoffset:破線の開始位置

CSS

@charset "utf-8";
/* CSS Document */
body {
  background: forestgreen;
}
.box {
  width: 800px;
  height: 500px;
  margin: 50px auto;
}
.line {
  stroke: #FFF;/*線の色*/
  stroke-width: 1;/*線の太さ*/
  fill: forestgreen;/*塗りの色(bodyに指定した色)*/
  stroke-dasharray: 3000; /*破線の間隔*/
  stroke-dashoffset: 3000;/*破線の開始位置*/
  -webkit-animation: DASH 3s ease-in-out 1s both;
  animation: DASH 3s ease-in-out 1s both;
}
@-webkit-keyframes DASH {
  0% {stroke-dashoffset:3000;fill:forestgreen;}
  70% {stroke-dashoffset:1000;fill:forestgreen;}
  100% {stroke-dashoffset:0;fill:#FFF;}
}
@keyframes DASH {
  0% {stroke-dashoffset:3000;fill:forestgreen;}
  70% {stroke-dashoffset:1000;fill:forestgreen;}
  100% {stroke-dashoffset:0;fill:#FFF;}
}
.bd {
  width: 800px;
  height: 100%;
  text-align: center;
  position: relative;
  padding: 10px 0;
}
div.bd div {
  background: #FFF;
  position: absolute;
  transition: all .3s ease-in-out .3s;
}
.active .bd div {
  background: #FFF;
}
.active .bd div.bdT {
  width: 0;height: 1px; top: 0; left: 0;
}
.active .bd div.bdB {
  width: 0; height: 1px; bottom: 0; right: 0;
}
.active .bd div.bdR {
  height: 0; width: 1px; right: 0; top: 0;
}
.active .bd div.bdL {
  height: 0; width: 1px; left: 0; bottom: 0;
}
.box:hover .bd div.bdT {
  width: 100%;
}
.box:hover .bd div.bdB {
  width: 100%;
}
.box:hover .bd div.bdR {
  height: 100%;
}
.box:hover .bd div.bdL {
  height: 100%;
}