コーディングテクニックの実装内容
画像の上で台形の単色要素を移動させるカーテンアニメーションを紹介します。
実装所要時間:10分程度
CSS,JavaScriptの記述内容
.block {
position: relative;
width: 768px;
overflow: hidden;
margin: 70px auto 0;
}
.block:after {
content: '';
display: block;
position: absolute;
top: -10%;
left: -10%;
width: 120%;
height: 120%;
background: #55310e;
transform: rotate(5deg);
transition: all 1.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}
.active.block:after {
transform: rotate(5deg) translateX(100%);
transition: all 1.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.8s;
}
@media screen and (max-width:640px){
.block {
width: 100%;
}
}
実装のポイント
現在制作中
おすすめ記事
- 【CSS】画像の上で光沢のある演出を交えて単色の要素がスライドするカーテンアニメーションの実装方法/Curtain animation in which a glossy single color element slides on the image
- 【CSS】カーテンが開くように背景色を左右にスライドさせて画像を表示するアニメーションの実装方法/ Animation to display images by sliding the background color left and right
- 【CSS】画像の上を2分割して単色の背景が相互に移動するカーテンアニメーション/CSS Curtain Sliding Background Color(2 split)
- 【CSS】画像の上で単色の要素をスライドさせるカーテンアニメーション(縦方向)/CSS Curtain Sliding Background Color(longitudinal)
- 【CSS】画像の上で複数の単色要素をスライドさせるカーテンアニメーション/CSS Curtain Sliding Background Color(multiple)
- 【CSS】画像の上で背景色を斜めにスライドさせるカーテンアニメーション/CSS Curtain Sliding Background Color(skew)
- 【CSS】画像の上で単色の要素をスライドさせるカーテンアニメーション(横方向)/CSS Curtain Sliding Background Color(side)
スポンサーリンク