Web & AOR Music Blog

I'm Web Front-End Engineer. I like AOR music.

アプリ 映像トレーニング 再開

途中で行けなくなっていたアプリ開発 映像トレーニングを再開。

2.2. CSS3の特徴

sample2.html

 ●拡大
transform:

sample3.html

 ●角丸
  border-radius:

sample4.html
  border-radius:50%; /* %だと、楕円みたいなる */

sample5.html

 CSS3 : キーフレーム

 方法はだいたい理解したので、
 落ち着いた所で、ひとつひとつ、静止画で分解してみよう!

animation-name: loading;
@-webkit-keyframes loading{
0%{  -webkit-transform: rotateY(20deg) rotateX(15deg) scale(1.0); opacity:0.7; }
  20%{ -webkit-transform: rotateY(30deg) rotateX(10deg) scale(0.9); opacity:0.6; }
  40%{ -webkit-transform: rotateY(40deg) rotateX(20deg) scale(0.9); opacity:0.5; }
  50%{ -webkit-transform: rotateY(0deg)  rotateX(10deg) scale(1.0); opacity:0.4; }
  60%{ -webkit-transform: rotateY(40deg) rotateX(10deg) scale(0.9); opacity:0.5; }
  80%{ -webkit-transform: rotateY(30deg) rotateX(20deg) scale(0.9); opacity:0.6; }
  100%{-webkit-transform: rotateY(20deg) rotateX(15deg) scale(1.0); opacity:0.7; }
}

●JavaScriptの概要

Copyright © Web & AOR Music Blog, All Rights Reserve.