
コーディングテクニックの実装内容
今回はホバーアニメーションに関する内容です。transformを使用して円形の画像をホバーした時に斜めからカラーをアニメーションさせながら重ねるテクニックを紹介します。JavaScriptは不使用なので簡単に実装できます。
使いどころ
ホバー時のアニメーションに適用するのが効果的です。
実装所要時間:10分程度
難易度:初心者コーダーでも実装可能
CSS,JavaScriptの記述内容
body {
background: #eefbfd;
}
.list {
display: flex;
justify-content: space-between;
width: 700px;
margin: 70px auto 0;
}
.list li {
position: relative;
display: inline-block;
width: 31%;
overflow: hidden;
line-height: 0;
cursor: pointer;
border-radius: 50%;
}
.list li:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 200%;
height: 100%;
opacity: .3;
z-index: 1;
pointer-events: none;
transform-origin: left top;
transform: skewX(-45deg) translateX(-100%);
transition: transform .4s ease;
background-color: #67dcf1;
}
.list li:hover:before {
transform: skewX(-45deg) translateX(0);
}
@media screen and (max-width:640px){
.list {
width: 100%;
}
}
実装のポイント
- 1) :beforeにカラーを乗せる。transitionでアニメーション。
- 2) transformのskewX(-45deg)によってホバー時に左上からカラーがかぶさってくる
- 3) ホバー前にtranslateX(-100%)、ホバー時にtranslateX(0)の値を適用することで左から右へ移動させている
スポンサーリンク