CSS3で画像スクロール効果を実現する方法（コード付き）-CSSチュートリアル-php.cn

CSS3で画像スクロール効果を実現する方法（コード付き）

烟雨青岚

リリース： 2020-07-08 13:01:50

転載

6629 人が閲覧しました

CSS3で画像スクロール効果を実現する方法（コード付き）

#CSS3 は画像のスクロールホイール効果を実現します

平常時はいくつかのスクロール画像効果を使用しますが、これらはすべて JavaScript コード ( JQuery) が使用されますが、Html5 と CSS3 が普及している今日の時代では、JavaScript コードを置き換えることで、Web ページの読み込み速度を向上させ、ユーザーにとってより使いやすいエクスペリエンスを実現するいくつかの一般的な効果を実現できます。

特に、WeChat プラットフォームの開発が比較的活発な今の時代では、HTML5 CSS3 を同じ効果で置き換えることで、より素晴らしいモバイル端末エクスペリエンスがもたらされるでしょう。たとえば、この記事では CSS3 の画像スクロールホイール効果を紹介します。

この記事の知識ポイントは、W3School 公式ドキュメントと CSS3 @keyframes ルールに基づいています。

アドレスリンク: http://www.w3school.com.cn/css3/css3_animation.asp

文法規則:

@keyframes 
animationname
 {
keyframes-selector
 {
css-styles
;}}

ログイン後にコピー

AnimationAnimationname はアニメーションの名前です。ユーザー定義の keyframes-selector はアニメーションの継続時間のパーセンテージです (移動速度は制御できます)。

原則: 小さな p の中に大きな p がネストされています。小さな p は、表示される 1 つの画像と同じ高さと幅です。大きな p の内側には、表示されるすべての画像を含む水平リストがあります。実行中は、大きなpの水平位置を変更することで画像の切り替えを行います（毎回1枚の画像の幅を左右に移動します）。

Html キーコード:

ログイン後にコピー

CSS スタイルキーコード:

.nav{
 
width:2000px;
 
height:150px;
 
position:absolute;
 
left:0px;
 
top:0;
 
z-index:9;
 
animation:myfirst 6s infinite;
 
-webkit-animation:myfirst 6s infinite;
 
-0-animation:myfirst 6s infinite;
 
-moz-animation:myfirst 6s infinite;
 
}
 
@keyframes myfirst
 
{
 
0%   {left: 0px;}
 
26.6%   {left: 0px;}
 
36.6%   {left: -320px;}
 
63.2%   {left: -320px;}
 
73.2%   {left: -640px;}
 
99.7%   {left: -640px;}
 
100% {left: -0px;}
 
}

ログイン後にコピー

表示形式を変更したい場合割合（画像の滞留時間とスクロール速度）と移動距離を調整する必要があります。

CSS3 テクノロジではブラウザの互換性の問題が考慮されているため、ブラウザごとにスタイルを記述し、名前を 1 つに変更し、他のものは同じにする必要があります。

@-o-keyframes myfirst

@-moz-keyframes myfirst

@-webkit-keyframes myfirst

ローリングアルゴリズムの最適化デモを参照

デモデモリンク

http://wongletion.sinaapp.com/

この記事はhttps://blog.csdn.net/u013741507/articleから転載されました。 /details/ 38779093

推奨チュートリアル: 「

CSS チュートリアル」