※現在リダイレクトにて新サイトへ移行中です

広告リンクをCSSアニメーションでもの凄くアピールしてみた

広告はクリックしてもらってなんぼです。
とにかく、自分のリンクを最後に踏んでもらわないといけない。
だから、目立たせよう（ネタ

※webkitを省いているので、古いブラウザでは動きません。

１、移動させる

すごく胡散臭い。

２、回転させる

回すものを間違えている気がする。

３、伸縮させる

もっと胡散臭い。

４、点滅させる

ポリゴンフラッシュ自粛

５、全部入り

自重せよ

アピール完了

移動と点滅くらいはASPから叱られないだろう。
あとは多分、使うには十工夫くらい必要です。

最後に、CSSを添付します。
上から順にneta1~11です。

※「webkit」は省いています。

.netawaku{
border: 1px solid #cccccc;
width:300px;
text-align:center;
margin:20px 0;
padding-top:20px;
padding-bottom:20px;
}

.neta1{
animation: neta1 1s infinite linear;
}

@keyframes neta1 {

0% {
transform: translateX(-10px);
}

50% {
transform: translateX(10px);
}

100% {
transform: translateX(-10px);
}

}

.neta2{
animation: neta2 1s infinite linear;
}

@keyframes neta2 {

0% {
transform: translateY(-10px);
}

50% {
transform: translateY(10px);
}

100% {
transform: translateY(-10px);
}

}

.neta3{
animation: neta3 1s infinite linear;
}

@keyframes neta3 {
100%{transform:rotate3d(0,0,10,360deg);}
}

.neta4{
animation: neta4 1s infinite linear;
}

@keyframes neta4 {
100%{transform:rotate3d(10,0,0,360deg);}
}

.neta5{
animation: neta5 1s infinite linear;
}

@keyframes neta5 {
100%{transform:rotate3d(0,10,0,360deg);}
}

.neta6{
animation: neta6 1s infinite linear;
}

@keyframes neta6 {
100%{transform:rotate3d(10,10,10,360deg);}
}

.neta7{
animation: neta7 1s infinite ease;
}

@keyframes neta7 {
0%{transform:scale(1,1);}
50%{transform:scale(2,2);}
100%{transform:scale(1,1);}
}

.neta8{
animation: neta8 10s infinite ease;
}

@keyframes neta8 {
0%{transform:scale(1,1);}
50%{transform:scale(8,8);}
100%{transform:scale(1,1);}
}

.neta9{
animation: neta9 1ms infinite linear;
}

@keyframes neta9 {
0%{background-color:#fff;}
100%{background-color:yellow;}
}

.neta10{
animation: neta10 1s infinite linear;
}

@keyframes neta10 {

0%{
transform:translate(-10px,0px) rotate(0deg) scale(1,1);
background-color:#fff;
}

50%{
transform:translate(10px,0px) rotate(360deg) scale(2,2);
background-color:yellow;
}

100%{
transform:translate(-10px,0px) rotate(720deg) scale(1,1);
background-color:#fff;
}

}

.neta11{
animation: neta11 3s infinite linear;
}

@keyframes neta11 {

0%{
transform:translate(-10px,0px) rotate(0deg) scale(1,1);
background-color:#fff;
}

50%{
transform:translate(10px,0px) rotate(360deg) scale(3,3);
background-color:yellow;
}

100%{
transform:translate(-10px,0px) rotate(720deg) scale(1,1);
background-color:#fff;
}

}

CSSアニメーションはほぼブラウザが対応したので、
今後は積極的に使っていきたいところです。

実践としては、マウスオーバー的なものによく使います。
検索すると凄い力作が出てくるので、一度見てみてほしい。

あと、注意としては、ユーザーの環境により動作の綺麗さが変わる点。
自分のパソコンはTN液晶の144Hz、高級グラボなので、すごく綺麗。
しかしボロノートパソコンで見ると、くそ汚いアニメーションです。

あんまり早く動かすのは止めた方がいいと思います。

 

• cat：WEB制作ネタ
• tag：CSSアニメーション
• top：parudou

ツイート

是非ご感想・ご指摘等をください。