ホームページ > 記事 > ウェブフロントエンド > テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。
テキストカルーセルと画像カルーセルを作成するにはどうすればよいですか?皆さんが最初に考えるのはjsを使うかどうかですが、実はテキストカルーセルや画像カルーセルも純粋なCSSでも実現できますので実装方法を見ていきましょう。
#今日は、実際のビジネスで使えるアニメーションテクニックを紹介したいと思います。 [推奨学習:css ビデオ チュートリアル ]
フレームごとのアニメーションとトゥイーン アニメーションを巧みに使用して、無限ループのカルーセル効果を実現します:
上の図を見て、これは非常に単純な移動アニメーションではないのかと尋ねずにはいられない学生もいます。 簡単な分析をしてみましょう。表面的には、要素の
transform:transform:transform() だけが変位しているように見えますが、
しかし注意してくださいここには 2 つの問題があります:
ステップ イージング機能とも呼ばれるフレームごとのアニメーション効果を使用する必要があります、 を使用します。最初に私の記事を読むことを強くお勧めします。 記事 - CSS アニメーションの詳細な説明。この記事を理解する上で重要な役割を果たします。 それでは、記事の冒頭の例を使用しましょう。このような HTML 構造があるとします:
{ /* Keyword values */ animation-timing-function: step-start; animation-timing-function: step-end; /* Function values */ animation-timing-function: steps(6, start) animation-timing-function: steps(4, end); }
まず、このような単純なレイアウトを実装します:
animation-timing-function:steps():<div class="g-container">
<ul>
<li>Lorem ipsum 1111111</li>
<li>Lorem ipsum 2222222</li>
<li>Lorem ipsum 3333333</li>
<li>Lorem ipsum 4444444</li>
<li>Lorem ipsum 5555555</li>
<li>Lorem ipsum 6666666</li>
</ul>
</div>
# # を使用できます。 #上記のいくつかの CSS 変数を見てパニックにならないでください。実際には理解するのは簡単です:
calc(var(--speed) * var(--s) )
steps(var(--s)) コマ送りアニメーションのフレーム数です。ここでは
steps(6)
calc(var(--s) * var (--h) * -1px))
単一の li コンテナの高さ * カルーセルの数 (実際には ul 全体の高さであり、終了を設定するために使用されます)フレームごとのアニメーションの値
If
overflow: hiddenをコンテナに追加すると、次のような効果が得られます。
このようにして、全体の構造を取得します。少なくとも、全体の効果は周期的です。
ただし、これはフレーム単位のアニメーションなので、切り替えが見えるだけで、各フレーム間のトランジション アニメーション効果はありません。そこで、次にトゥイーン アニメーションを導入する必要があります。 トゥイーン アニメーションを使用して 2 つのデータ セット間の切り替えを実現する
トゥイーン アニメーションを使用して、動的な切り替え効果を実現する必要があります。 このステップは実際には非常に簡単で、transform
を使用して一連のデータを状態 A から状態 B に移動する必要があります。 デモ用に 1 つだけ取り出した場合、おおよそのコードは次のとおりです::root { // 轮播的个数 --s: 6; // 单个 li 容器的高度 --h: 36; // 单次动画的时长 --speed: 1.5s; } .g-container { width: 300px; height: calc(var(--h) * 1px); } ul { display: flex; flex-direction: column; animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite; } ul li { width: 100%; } @keyframes move { 0% { transform: translate(0, 0); } 100% { transform: translate(0, calc(var(--s) * var(--h) * -1px)); } }
<div class="g-container"> <ul style="--s: 6"> <li>Lorem ipsum 1111111</li> <li>Lorem ipsum 2222222</li> <li>Lorem ipsum 3333333</li> <li>Lorem ipsum 4444444</li> <li>Lorem ipsum 5555555</li> <li>Lorem ipsum 6666666</li> </ul> </div>非常に単純なアニメーション:
上記の効果をもとに、冒頭で述べた
コマ送りアニメーションと トゥイーンアニメーション を組み合わせると、ul の全体の動きが重なり合います。 li の単一の動きを一緒に:
:root { --h: 36; --speed: 1.2s; } ul li { height: 36px; animation: liMove calc(var(--speed)) infinite; } @keyframes liMove { 0% { transform: translate(0, 0); } 80%, 100% { transform: translate(0, -36px); } }はこのような効果を得ることができます:
##すごい、魔法のような化学反応が起こりました。
フレームごとのアニメーション
とトゥイーン アニメーションの組み合わせに基づいて、カルーセル効果をほぼ達成しました。 当然,有一点瑕疵,可以看到,最后一组数据,是从第六组数据 transform 移动向了一组空数据:
实际开发过轮播的同学肯定知道,这里,其实也很好处理,我们只需要在末尾,补一组头部的第一个数据即可: 改造下我们的 HTML: 这样,我们再看看效果:
Beautiful!如果你还有所疑惑,我们给容器加上
完整的代码,你可以戳这里:CodePen Demo -- Vertical Infinity Loop https://codepen.io/Chokcoco/pen/RwQVByx 当然,实现了竖直方向的轮播,横向的效果也是一样的。 并且,我们可以通过在 HTML 结构中,通过 style 内填写 CSS 变量值,传入实际的 li 个数,以达到根据不同 li 个数适配不同动画: 整个动画的 CSS 代码基本是一致的,我们只需要改变两个动画的 这样,我们就轻松的转化为了横向的效果:
完整的代码,你可以戳这里:CodePen Demo -- Horizontal Infinity Loop https://codepen.io/Chokcoco/pen/JjpNBXY OK,上面的只是文字版的轮播,那如果是图片呢? 没问题,方法都是一样的。基于上述的代码,我们可以轻松地将它修改一下后得到图片版的轮播效果。 代码都是一样的,就不再列出来,直接看看效果:
完整的代码,你可以戳这里:CodePen Demo -- Horizontal Image Infinity Loop https://codepen.io/Chokcoco/pen/GRQvqgq 掌握了这个技巧之后,你可以将它运用在非常多只需要简化版的轮播效果之上。 再简单总结一下,非常有意思的技巧: 利用 逐帧动画,实现整体的轮播的循环效果 利用 补间动画,实现具体的 状态A 向 状态B* 的动画效果 逐帧动画 配合 补间动画 构成整体轮播的效果 通过向 HTML 结构末尾补充一组头部数据,实现整体动画的衔接 通过 HTML 元素的 style 标签,利用 CSS 变量,填入实际的参与循环的 DOM 个数,可以实现 JavaScript 与 CSS 的打通 (学习视频分享:web前端)末尾填充头部第一组数据
<div class="g-container">
<ul>
<li>Lorem ipsum 1111111</li>
<li>Lorem ipsum 2222222</li>
<li>Lorem ipsum 3333333</li>
<li>Lorem ipsum 4444444</li>
<li>Lorem ipsum 5555555</li>
<li>Lorem ipsum 6666666</li>
<!--末尾补一个首条数据-->
<li>Lorem ipsum 1111111</li>
</ul>
</div>
overflow: hidden
,实际效果如下,通过额外添加的最后一组数据,我们的整个动画刚好完美的衔接上,一个完美的轮播效果:
横向无限轮播
<div>
<ul>
<li>Lorem ipsum 1111111</li>
<li>Lorem ipsum 2222222</li>
<li>Lorem ipsum 3333333</li>
<li>Lorem ipsum 4444444</li>
<li>Lorem ipsum 5555555</li>
<li>Lorem ipsum 6666666</li>
<!--末尾补一个首尾数据-->
<li>Lorem ipsum 1111111</li>
</ul>
</div>
transform
值,从竖直位移,改成水平位移即可::root {
--w: 300;
--speed: 1.5s;
}
.g-container {
width: calc(--w * 1px);
overflow: hidden;
}
ul {
display: flex;
flex-wrap: nowrap;
animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}
ul li {
flex-shrink: 0;
width: 100%;
height: 100%;
animation: liMove calc(var(--speed)) infinite;
}
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(calc(var(--s) * var(--w) * -1px), 0);
}
}
@keyframes liMove {
0% {
transform: translate(0, 0);
}
80%,
100% {
transform: translate(calc(var(--w) * -1px), 0);
}
}
轮播图?不在话下
以上がテキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。