tumblr がダッシュボードの新しい投稿アイコンに追加する「バウンス」を再現しようとしています。
そのバウンスを作成するために使用する方法を探していましたがbackground-position
、今のところ運がありません.
ここでの他の質問には、を使用background
して指定しようとする際に問題がありましたbackground-position
が、私はまったく使用background
していません。
私はこれに多くの時間を費やすつもりはありませんでしたが、今では興味があります。
HTML
<div id="container">
<div class="block blue">
<div class="inblock light-green"></div>
</div>
<div class="block green">
<div class="inblock orange"></div>
</div>
<div class="block yellow">
<div class="inblock light-blue"></div>
</div>
<div class="block blue">
<div class="inblock light-green"></div>
</div>
<div class="block green">
<div class="inblock orange"></div>
</div>
<div class="block yellow">
<div class="inblock light-blue"></div>
</div>
</div>
CSS
#container {
width:80%;
height: 200px;
padding-left:5em;
background-color: #95A5A6;
}
.block {
margin: 2em;
height: 130px;
width: 130px;
float:left;
border-radius:10px;
}
.block:hover > .inblock{
background-color:#E74C3C;
background-position: top;
}
.inblock {
height: 80px;
width: 80px;
background-color:blue;
margin: 1.5em;
}
.light-blue {
background-color:#2980B9
}
.blue {
background-color:#2C3E50;
}
.green {
background-color:#27AE60;
}
.yellow {
background-color:#F1C40F;
}
.orange {
background-color:#E67E22;
}
.light-green {
background-color:#2ECC71;
}