超クールな CSS3 スライドショー エフェクト - フロントエンド開発 blog_html/css_WEB-ITnose

残念なことに、私はとても忙しくて勉強する時間があまりありません。 QQ に似た IM コミュニケーション ツール インターフェイスや、この CSS スライド プレゼンテーション (ここにあります) などの新しいブログ インターフェイスなど、この分野で多くのプロジェクトを実行しました。

このスライドショーのエフェクトを作成するように求められた場合、少なくともこのtransform:translateY(430px)、transform:translateX(-310px)は使用しなかったと思います。 ); andtransition-delay: 0.4s;

久しぶりにCSS3の効果を書いたので、もう覚えていないので、以前書いた記事に戻ります。この生徒の特殊効果がどのように作成されたかを見てみましょう。transform、transition、animate

まず、スライドがどのように作成されるかについて話しましょう。以前、このスライドと同じオリジナルを使ってアコーディオンケースをWeiboに投稿しました。アコーディオンのデモをチェックしてください

この場合に使用するテクニックは 2 つ目です。ただし、この単純なdisplay:noneとdisplay:blockメソッドは使用せず、css3の別の属性、つまり

を使用します。 2.移動translate

モバイル翻訳を次のように分割します。 3 つの状況:translate(x,y) は水平方向と垂直方向に同時に移動します (つまり、X 軸と Y 軸が同時に移動します)。translateX(x) は水平方向にのみ移動します (X 軸は移動します)。 translationY( Y) は垂直方向への移動（Y 軸の移動）のみで、具体的な使用方法は次のとおりです。 100px):

transform:translateY(20px):

目的は、通常のスライドの作成方法と同じにすることです。スクロールは、ボックスが左に移動し、JS をクリックすると内側のボックスが自動的にスクロールするように制御されます。

最初の画面の移動メニュー効果は非常にまぶしいですが、translateX(-310px) も使用されており、この隠しボックスとモバイル メニュー上のリンクが表示されます。

#slider{width:3832px;transition:0.6s cubic-bezier(0.77,0,0.175,1)}.slide{width:958px;height:470px;float:left}#trigger1:checked ~ #wrapper #slider{transform:translateX(0px)}#trigger2:checked ~ #wrapper #slider{transform:translateX(-958px)}#trigger3:checked ~ #wrapper #slider{transform:translateX(-1916px)}#trigger4:checked ~ #wrapper #slider{transform:translateX(-2874px)}

になると、各子ノードは遷移遅延に対応し、徐々に増加し、リンクが徐々に現れる効果を形成します。

この CSS3 スライドショーは本当に素晴らしく、とても気に入っています。常に自動的にスクロールできるようにできれば素晴らしいのですが、方法があるはずです。

.scroll{width:620px;height:430px;transition:0.3s ease-in-out;transform:translateX(0px)}.left{width:310px;height:430px;background:#9bd0d5;float:left}.right{width:310px;height:310px;padding-top:120px;font-size:15px;line-height:2;background:#e0613f;float:left}.right a{opacity:0;display:block;padding-left:20px;color:#f9edd0;transition:transform 0.3s,opacity 0.3s;transform:translate(-10px,5px)}.right a:hover{background:#555555}.right a:nth-of-type(1){transition-delay:0.4s}.right a:nth-of-type(2){transition-delay:0.5s}.right a:nth-of-type(3){transition-delay:0.6s}.right a:nth-of-type(4){transition-delay:0.7s}.right a:nth-of-type(5){transition-delay:0.8s}

この作者の Web サイトをチェックしてください

デモ css3 ミニゲームのデモ