CSSアニメを日常的に作る事が趣味になりつつある、ユゲタです。
独自のアニメーションを作ったらそれはもはやアートですよね。
安定的なアニメーションを作ったら、ホームページで公開するということで、ブログの記事数を稼いでいるのも、否めませんが、
とにかくホームページ制作で、デザインも仕事で請け負う場合、作業に直結する事も多く、ある意味修行１００本ノックという風にも考えています。
100日続けたら、100個の作品ができて、まさかの個展が開そうですね。（ウヒヒ）
デモ
W
コメント
今回のCSSアニメは、Icon-Dropというタイトルをつけてみたんですが、とあるサイトで小気味良く動いていたGIFアニメーションを、自分なりにsvgとcssで再現してみた、 いわゆるパクリ系アニメです。 Wという文字を表示していますが、正方形のアイコンなどを中心の置いても、いい感じに動くと思います。 できれば、色で印象を与えたいので、あまりごちゃごちゃとした色がたくさん使われているアイコンではなく、シンプルなアイコンや、短めのキーワードが好ましいですね。 Dropしている丸い箇所の色を変えるだけでも、ずいぶんと印象も変わるので、お好みに合わせて使えると思います。ソース
html<div class="loading">
<div class="str">W</div>
<div class="water">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="drop">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo"></feColorMatrix>
<feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
</filter>
</defs>
</svg>
</div>
css
.loading {
filter:url(#drop);
position:relative;
width:100px;
height:100px;
white-space:normal;
}
.str {
z-index:2;
position:absolute;
text-align:center;
line-height:100px;
width:100%;
height:100%;
font-size:40px;
color:white;
font-weight:bold;
animation: anim-str 2s ease-in-out infinite;
}
.water {
z-index:1;
position:relative;
width:100%;
height:100%;
animation: anim-water 4s ease-in-out infinite;
}
.water > div {
position:absolute;
width:30px;
height:30px;
border-radius:50%;
background-color:#1DA9F1;
}
.water > div:nth-child(1) {
top:0;
left:0;
animation: anim-water-1 2s ease-in-out infinite;
}
.water > div:nth-child(2) {
top:0;
right:0;
animation: anim-water-2 2s ease-in-out infinite;
}
.water > div:nth-child(3) {
bottom:0;
left:0;
animation: anim-water-3 2s ease-in-out infinite;
}
.water > div:nth-child(4) {
bottom:0;
right:0;
animation: anim-water-4 2s ease-in-out infinite;
}
@keyframes anim-str {
0%{
opacity:0;
}
30%{
opacity:0;
}
50%{
opacity:1;
}
70%{
opacity:1;
}
80%{
opacity:0;
}
100%{
opacity:0;
}
}
@keyframes anim-water {
0%{
transform:rotate(0deg);
}
25%{
transform:rotate(90deg);
}
50%{
transform:rotate(180deg);
}
75%{
transform:rotate(270deg);
}
100%{
transform:rotate(360deg);
}
}
@keyframes anim-water-1 {
0%{
top:0;
left:0;
transform:scale(1);
}
50%{
top:35px;
left:35px;
transform:scale(2.5);
}
100%{
top:0;
left:0;
transform:scale(1);
}
}
@keyframes anim-water-2 {
0%{
top:0;
right:0;
transform:scale(1);
}
50%{
top:35px;
right:35px;
transform:scale(2.5);
}
100%{
top:0;
right:0;
transform:scale(1);
}
}
@keyframes anim-water-3 {
0%{
bottom:0;
left:0;
transform:scale(1);
}
50%{
bottom:35px;
left:35px;
transform:scale(2.5);
}
100%{
bottom:0;
left:0;
transform:scale(1);
}
}
@keyframes anim-water-4 {
0%{
bottom:0;
right:0;
transform:scale(1);
}
50%{
bottom:35px;
right:35px;
transform:scale(2.5);
}
100%{
bottom:0;
right:0;
transform:scale(1);
}
}
0 件のコメント:
コメントを投稿