スライドショーの純粋な CSS、JavaScript_html/css_WEB-ITnose なし-htmlチュートリアル-php.cn

スライドショーの純粋な CSS、JavaScript_html/css_WEB-ITnose なし

WBOY

リリース： 2016-06-24 11:39:05

オリジナル

928 人が閲覧しました

以前、誰かが私に、js を使用せずに純粋な CSS を使用してスライドショーを実装する方法を尋ねました。

それでは、純粋な CSS + HTML を使用してスライドショーを実装するにはどうすればよいでしょうか?参考までに以下にいくつかの方法を示しますが、その中にはまだ完成していないものもあります。

オプション 1: CSS3 アニメーションを使用します

サンプルポータルで私をクリックしてください、私をクリックしてください!

すごいです

オプション 2: 表示する必要がある画像を結合して横長の画像にし、:hover 疑似クラスを使用して画像の位置を変更し、スライドショーの効果を実現します

ポータルの例はまだ Click me

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>幻灯片</title>    <style>        .ani {            width: 440px;            height: 440px;            margin: 50px auto;            overflow: hidden;            box-shadow: 0 0 5px rgba(0, 0, 0, 1);            background-size: cover;            background-position: center;            -webkit-animation-name: loops;            -webkit-animation-duration: 20s;            -webkit-animation-iteration-count: infinite;        }        @-webkit-keyframes loops {            0% {                background: url(../images/01.jpg) no-repeat;            }            25% {                background: url(../images/02.jpg) no-repeat;            }            50% {                background: url(../images/03.jpeg) no-repeat;            }            75% {                background: url(../images/04.jpg) no-repeat;            }            100% {                background: url(../images/05.jpg) no-repeat;            }        }    </style></head><body><div class="ani"></div></body></html>

ログイン後にコピー

オプション 3: トレースポイントを使用します。描画ポイントをクリックして画像を選択すると、スライドショーの効果が得られます。

私はポータルを持っていないので、あなたがそれを掴むことができます。