あなたのキモチ　つなげるカタチ

TOP > CSS > 【CSS】画像の上で台形の単色要素を移動させるカーテンアニメーション/CSS Curtain Sliding Background Color（Trapezoid）

【CSS】画像の上で台形の単色要素を移動させるカーテンアニメーション/CSS Curtain Sliding Background Color（Trapezoid）

スポンサーリンク

コーディングテクニックの実装内容

画像の上で台形の単色要素を移動させるカーテンアニメーションを紹介します。

実装所要時間：10分程度

>> DEMOはこちらから！（View Demo）

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%;
  }
}

実装のポイント

現在制作中

>> DEMOはこちらから！（View Demo）

おすすめ記事

スポンサーリンク