『食いっぱぐれない』ためのスキル学習ブログ
> 初心者と学ぶ!実践Photoshop講座 <

読者の目に止まる!CSSだけで動くアイキャッチアイコンの作り方

デモ

NEW
SALE
 
NEW
SALE
 
NEW
SALE
 

コード一覧

NEW

HTML
<span class="eyecatch_icon1">NEW</span>

CSS
.eyecatch_icon1{
-webkit-animation: bigger 1s ease-in alternate infinite;
color:#ff5c5c;/*カスタム*/
margin-right:2px;
display:inline-block;
font-family:impact, sans-serif;
text-shadow:
1px 1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
-1px -1px 0 #fff;
}

@-webkit-keyframes bigger{
from{ -webkit-transform:scale(1);}
30%{ -webkit-transform:scale(1.2);}
50%{ -webkit-transform:scale(1);}
to{ -webkit-transform:scale(1);}
}
 
NEW

HTML
<span class="eyecatch_icon2">NEW</span>

CSS
.eyecatch_icon2{
color:#ff5c5c;/*カスタム*/
margin-right:2px;
display:inline-block;
font-family: impact, sans-serif;
overflow:hidden;
position:relative;
text-shadow:
1px 1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
-1px -1px 0 #fff;
}

.eyecatch_icon2::after{
-webkit-animation:rotate-call 2s infinite;
content:"!!";
display:inline-block;
padding:0 0 0 .1em;
letter-spacing: .1em;
}

@-webkit-keyframes rotate-call{
from{ -webkit-transform:rotate(0);}
10%{ -webkit-transform:rotate(15deg);}
20%{ -webkit-transform:rotate(0);}
30%{ -webkit-transform:rotate(15deg);}
40%{ -webkit-transform:rotate(0);}
to{ -webkit-transform:rotate(0);}
}
 
NEW

HTML
<span class="eyecatch_icon3">NEW</span>

CSS
.eyecatch_icon3{
color:#ff5c5c;/*カスタム*/
display:inline-block;
margin-right:2px;
font-family:impact;
overflow:hidden;
position: relative;
text-shadow:
1px 1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
-1px -1px 0 #fff;
}

.eyecatch_icon3::before{
-webkit-animation:appear 2s ease-out infinite;
background: #fff;
content:" ";
display:inline-block;
height:1.2em;
left:0;
position:absolute;
top:0;
width:100%;
}

@-webkit-keyframes appear{
from{-webkit-transform:translate(0);}
to{-webkit-transform:translate(15em, 0);}
}

 

カスタム

・color:#ff5c5c;

色の変更です。サイトのメインカラーや背景色に合わせ変更してみてください。

#ff5c5cから黄色(#ffe75c)に変更
NEW

#ff5c5cから青(#44d9e6)に変更
NEW

#ff5c5cから黒(#000)に変更
NEW
 

NEW僕も生まれ変わった

男の子

コメントを残す

メールアドレスが公開されることはありません。