CSS を使用して写真の回転ドアのダイナミックな効果を実現する方法を見てみましょう。-CSSチュートリアル-php.cn

CSS を使用して写真の回転ドアのダイナミックな効果を実現する方法を見てみましょう。

青灯夜游

リリース： 2021-12-30 10:38:14

転載

3667 人が閲覧しました

CSSを使用して、絵の回転灯のダイナミックな効果を実現するにはどうすればよいですか?次の記事では、css3 アニメーショントランスフォームを使用して画像の回転効果を実現する方法を紹介します。

CSS を使用して写真の回転ドアのダイナミックな効果を実現する方法を見てみましょう。

#プロジェクトでは、写真の回転ドア効果を実現する必要があるためです。一般的な Vue コンポーネントライブラリのほとんどを確認した結果、そのようなコンポーネントはほとんど見られなかったため、CSS3 アニメーションに基づいて回転ドア効果を手動で実装しました。すぐに 2 つの解決策が思い浮かびます。1 つは、タイマー、scrollLeft を使用するか、位置の left 属性値を変更することです。もう 1 つは、CSS3 の変換とアニメーションを使用することです。

アニメーションを使用して実装することを選択します。js で実装されたアニメーションは CPU で動作し、css3 のアニメーションは GPU で動作するため、css3 のレンダリングコストは低くなります。このタイプの操作を実装するには css3 を使用することにしました。

scrollLeft の使用

最初は、scrollLeft オーバーフローを使用して効果を実現し、それをトリガーするためにタイマーを使用していました。これにより、再描画が発生します。そして毎回リフローします。 (追記: パフォーマンスを向上させる必要がある場合は、タイマートリガーの代わりに requestAnimationFrame を使用できます。主な利点は、requestAnimationFrame が各フレーム内のすべての DOM 操作を集中させ、1 回の再描画またはリフロー、および再描画またはリフローで完了することです。リフロー時間間隔はブラウザの更新頻度にほぼ準拠します。一般に、この頻度は 1 秒あたり 60 フレームです)

(scrollLeft を変更すると、左と同じ効果があります) コアコード:

function toScrollLeft(){
  //  如果容器的宽度大于滚动条距离，则重复滚动
  if(divWidth > box.scrollLeft){
    box.scrollLeft++
    setTimeout(&#39;toScrollLeft()&#39;, 18);
  }
  else{
    // 滚动结束，从新开始
    box.scrollLeft=0;
    setTimeout(&#39;toScrollLeft()&#39;, 18);
  }
}

ログイン後にコピー

css3 アニメーション変換を使用する

css3 アニメーションを使用して回転ランタンを実装し、CSS 変数を使用して各状態変換のtranslateX オフセットを動的に設定します。最も重要なアニメーションには、次のような効果があります。 Made gif が続きます。

CSS を使用して写真の回転ドアのダイナミックな効果を実現する方法を見てみましょう。

1. HTMLレイアウトの事前設定とdivコンテナの設定

<div class="box" >
    <ul >
        <li v-for="(src,i) in cap " :key="i">
            <img     style="max-width:90%" height="90px" :src="src" / alt="CSS を使用して写真の回転ドアのダイナミックな効果を実現する方法を見てみましょう。" >
        </li>
    </ul>
</div>

ログイン後にコピー

2. 対応するスタイルの設定

.box{
display: flex;
overflow: hidden;
flex-direction: column;
border-radius:12px;
width: 100%;
height: 100%;
background-color:#fff;
}
ul{
display: flex;
}

ログイン後にコピー

3. 最後に、バインディングオブジェクトをスタイルに設定します。.box 要素のスタイルは主に CSS 変数を使用し、特定の値を使用して効果を動的に設定します。アニメーションの各状態。キーコードはアニメーションを使用しています: cap.length*8 は無限に直線的に移動し、無限に繰り返される動きの効果を生み出します。

ps: これは主要な全体的な操作ポイントであり、その他の詳細は省略されています

<div class="box" :style="{
&#39;--card-ul-width-start&#39;:-30+&#39;px&#39;,
&#39;--card-ul-width-middle1&#39;:-cap.length*30+&#39;px&#39;, 
&#39;--card-ul-width-middle2&#39;:-cap.length*60+&#39;px&#39;,
&#39;--card-ul-width-end&#39;:-cap.length*90+&#39;px&#39;
}">
    <ul :style="{&#39;-webkit-animation&#39;:cap.length*8+ &#39;s move infinite linear;&#39;}">
        <li></li>
    </ul>
</div>

ログイン後にコピー

data(){
    cap:new Array(6).fill(&#39;https://res.minigame.vip/gc-assets/fruit-master/fruit-master_icon.png&#39;)
}

ログイン後にコピー

@keyframes move {
    0%{
    transform:translateX(var(--card-ul-width-start))
    }
    30%{
    transform:translateX(var(--card-ul-width-middle1))
    }
    70%{
    transform:translateX(var(--card-ul-width-middle2))
    }
    100%{
    transform:translateX(var(--card-ul-width-end))
    }    
}

ログイン後にコピー

(学習ビデオ共有: css ビデオチュートリアル )

以上がCSS を使用して写真の回転ドアのダイナミックな効果を実現する方法を見てみましょう。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。