CSS3 を使用して見事な読み込みアニメーション効果を実現_html/css_WEB-ITnose
SpinKit 是一套网页动画效果，包含8种基于 CSS3 实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑，易于定制的动画。SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案，而是给现代浏览器提供更优的技术实现方案和更佳的使用体验。（为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览）
Loading 动画效果一
HTML 代码：
1
2
3
4
5
6
7
CSSコード:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
.spinner {
マージン : 100px auto ;
幅: 50 ピクセル;高さ: 60 ピクセル;
テキスト整列: 中央;
フォント サイズ: 10px;
}
.spinner > {
背景色: #67CF22;
幅: 6px;
表示: インラインブロック;
-webkit-animation: ストレッチ遅延 1.2 秒 .rect 2 {
- webkit アニメーション遅延: -1.1 秒
}
.spinner .rect 3 {
-webkit-アニメーション遅延: -1.0 秒;
アニメーション遅延: -1.0 秒 }
.spinner .rect 4 {
-ウェブキット-アニメーション遅延: -0.9 秒;
アニメーション遅延: -0.9 秒;
.rect 5 -0.8 秒;
}
@-webkit-keyframes ストレッチディレイ {
0%, 40%, 100% { -webkit-transform:scaleY( 0.4 ) }
20% { -webkit-transform:scaleY ( 1.0 ) }
}
@keyframes ストレッチディレイ {
0% , 40% , 100% {
変換:scaleY( 0.4 );
-webkit-transform: scaleY( 0.4 );
} 20% {
transform: scaleY( 1.0 );
-webkit-transform: scaleY( 1.0 );
}
}
Loading 动画效果二
HTML 代码：
1
CSS 代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.spinner {
width : 60px ;
height : 60px ;
background-color : #67CF22 ;
margin : 100px auto ;
-webkit-animation: rotateplane 1.2 s infinite ease-in-out;
animation: rotateplane 1.2 s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
0% { -webkit-transform: perspective( 120px ) }
50% { -webkit-transform: perspective( 120px ) rotateY( 180 deg) }
100% { -webkit-transform: perspective( 120px ) rotateY( 180 deg) rotateX( 180 deg) }
}
@keyframes rotateplane {
0% {
transform: perspective( 120px ) rotateX( 0 deg) rotateY( 0 deg);
-webkit-transform: perspective( 120px ) rotateX( 0 deg) rotateY( 0 deg)
} 50% {
transform: perspective( 120px ) rotateX( -180.1 deg) rotateY( 0 deg);
-webkit-transform: perspective( 120px ) rotateX( -180.1 deg) rotateY( 0 deg)
} 100% {
transform: perspective( 120px ) rotateX( -180 deg) rotateY( -179.9 deg);
-webkit-transform: perspective( 120px ) rotateX( -180 deg) rotateY( -179.9 deg);
}
}
Loading 动画效果三
HTML 代码：
1
2
3
4
CSSコード:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.spinner {
幅: 60px;
高さ: 60px ;
位置 : 相対 ;
マージン : 100px auto ;
.double-bounce 1 、 .double-bounce 2 {
width: 100% ;
高さ: 100%;
境界線: 50%;
不透明度: 0.6;
左: 0;
-ウェブキット-アニメーション: バウンス 2.0 秒の無限イーズインアウト
アニメーション: バウンス 2.0 秒の無限イーズインアウト
}
.double-bounce 2 {
-webkit-animation-delay: -1.0 秒;
アニメーション遅延: -1.0 秒;
}
@-webkit-keyframes バウンス {
0% , 100% { -webkit-transform:scale( 0.0 ) }
50% { -ウェブキット-transform: スケール( 1.0 ) }
}
@keyframes bounce {
0% , 100% {
変換: スケール( 0.0 )
-webkit-transform : スケール( 0.0 );
} 50% {
,,,
HTMLコード：
CSSコード：
1
2 3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.spinner {
margin : 100px auto ;
幅: 32px ;
高さ: 32px ;
位置 : 相対的;
}
.cube 1 , .cube 2 {
背景色 : #67CF22 ;
幅: 30px ;
高さ: 30px ;
位置: 絶対;
トップ : 0 ;
残り : 0 ;
-webkit-animation: cubemove 1.8 秒の無限イーズインアウト。
アニメーション: cubemove 1.8 秒の無限イーズインアウト。
}
.cube 2 {
-webkit-animation-delay: -0.9 s;
アニメーション遅延: -0.9 秒。
}
@-webkit-keyframes cubemove {
25% { -webkit-transform: 変換X( 42px ) 回転( -90 度) スケール( 0.5 ) }
50% { -webkit -変換: 変換X ( 42px ) 変換Y( 42ピクセル ) 回転( -180 度) }
75% { -webkit-transform:translateX( 0px ) TranslationY( 42px ) 回転( -270 度) スケール( 0.5 ) }
100% { -webkit -transform: 回転( -360 度) }
}
@keyframes cubemove {
25% {
変換: 変換X( 42px ) 回転( -90 度) スケール( 0.5 );
-webkit-transform: 変換X( 42px ) 回転( -90 度) スケール( 0.5 );
} 50% {
変換: 変換X( 42px ) 変換Y( 42px ) 回転( -179 度);
-webkit-transform: 変換X( 42px ) 変換Y( 42px ) 回転( -179 度);
} 50.1% {
変換: 変換X( 42px ) 変換Y( 42px ) 回転( -180 度);
-webkit-transform: 変換X( 42px ) 変換Y( 42px ) 回転( -180 度);
} 75% {
変換: 変換X( 0px ) 変換Y( 42px ) 回転( -270 度) スケール( 0.5 );
-webkit-transform: 変換X( 0px ) 変換Y( 42px ) 回転( -270 度) スケール( 0.5 );
} 100% {
transform:rotate(-360 deg);
アニメーション効果５の読み込み
HTMLコード:
CSSコード:
1
2
3
4
5
6
7
8
9
10
11
12
1 3
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
.spinner {
margin : 100px auto ;幅 : 90px
高さ : 90p x ;
位置 : 中央 ;
アニメーション: 回転 2.0 秒.0 秒の無限リニア
}
.dot 1 , .dot 2 {
高さ : 60 % ;
位置 : 絶対;
トップ:
背景色: #67CF22;
境界半径: 100%;
-webkit-animation: バウンス 2.0 秒の無限イーズインアウト
アニメーション: バウンス 2.0 秒の無限イーズインアウト
}
.dot 2 {
上 : 自動 ;
下 : 0px ;
アニメーション遅延: -1.0 秒;
}
@-webkit-keyframes 回転 { 100% { -webkit-transform: 回転( 360 度) }}
@keyframes 回転 { 100% { 変換: 回転( 360 度) -webkit-transform: 回転( 360 度) ) }}
@-webkit-keyframes バウンス {
0% , 100% { -webkit-transform :scale( 0.0 ) }
50% { -webkit-transform:scale( 1.0 ) }
}
@keyframes bounce {
0% , 100% {
transform: scale( 0.0 );
-webkit-transform: scale( 0.0 );
} 50% {
transform: scale( 1.0 );
-webkit-transform: scale( 1.0 );
}
}
Loading 动画效果六
HTML 代码：
1
2
3
4
5
CSSコード:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.spinner {
マージン : 100px 自動 0 ;
width : 150px ;
.spinner >
高さ: 30px ;
背景-カラー: #67CF22;
ボーダー半径: 100%;
表示: インラインブロック;
-webkit-animation: 無限イーズインアウト
アニメーション: バウンス遅延 1.4 秒無限イーズ -in-out;
/* アニメーションの開始時に最初のフレームがちらつかないようにします */
-webkit-animation-fill-mode: Both ;
anime-fill-mode: Both ;
. スピナー .bounce 1 {-webkit アニメーション遅延: -0.32 秒
}
.spinner .bounce 2 {
-webキット-アニメーション-遅延: -0.16 秒;
アニメーション遅延: -0.16 秒}
40% { -webkit-transform:scale( 1.0 ) }
}
@keyframes bouncedelay {
0% , 80% , 100% {
変換: スケール 0. 0 );
-webkit-transform:scale( 0.0 );
} 40% {
アニメーション効果の読み込み 7
HTML コード:
1
CSS 代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.spinner {
width : 40px ;
height : 40px ;
margin : 100px auto ;
background-color : #333 ;
border-radius: 100% ;
-webkit-animation: scaleout 1.0 s infinite ease-in-out;
animation: scaleout 1.0 s infinite ease-in-out;
}
@-webkit-keyframes scaleout {
0% { -webkit-transform: scale( 0.0 ) }
100% {
-webkit-transform: scale( 1.0 );
opacity: 0 ;
}
}
@keyframes scaleout {
0% {
transform: scale( 0.0 );
-webkit-transform: scale( 0.0 );
} 100% {
transform: scale( 1.0 );
-webkit-transform: scale( 1.0 );
opacity: 0 ;
}
}
Loading 动画效果八
HTML 代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
CSSコード:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
106
107
108
109
110
.spinner {
マージン: 100px;
幅: 20px;
位置: 相対;
幅: 6px;
背景色: #333;
境界半径: 100% ;
位置: 絶対;
-webkit-animation: バウンス遅延 1.2 秒、無限イーズインアウト。
アニメーション: バウンス遅延 1.2 秒、無限イーズインアウト。
-webkit-animation-fill-mode: 両方 ;
アニメーションフィルモード: 両方 ;
}
.spinner .spinner-container {
位置 : 絶対 ;
幅 : 100% ;
高さ : 100% ;
}
.container 2 {
-webkit-transform:rotateZ( 45 度);
変換:回転Z(45度);
}
.container 3 {
-webkit-transform:rotateZ( 90 度);
変換:回転Z(90度);
}
.circle 1 { トップ : 0 ;左: 0 ; }
.circle 2 { トップ : 0 ;右: 0 ; }
.circle 3 { 右 : 0 ;下: 0; }
.circle 4 { 左 : 0 ;下: 0; }
.container 2 .circle 1 {
-webkit-animation-delay: -1.1 s;
アニメーション遅延: -1.1 秒。
}
.container 3 .circle 1 {
-webkit-animation-delay: -1.0 s;
アニメーション遅延: -1.0 秒。
}
.container 1 .circle 2 {
-webkit-animation-delay: -0.9 s;
アニメーション遅延: -0.9 秒。
}
.container 2 .circle 2 {
-webkit-animation-delay: -0.8 s;
アニメーション遅延: -0.8 秒;
}
.container 3 .circle 2 {
-webkit-animation-delay: -0.7 s;
アニメーション遅延: -0.7 秒。
}
.container 1 .circle 3 {
-webkit-animation-delay: -0.6 s;
アニメーション遅延: -0.6 秒。
}
.container 2 .circle 3 {
-webkit-animation-delay: -0.5 s;
アニメーション遅延: -0.5 秒。
}
.container 3 .circle 3 {
-webkit-animation-delay: -0.4 s;
アニメーション遅延: -0.4 秒。
}
.container 1 .circle 4 {
-webkit-animation-delay: -0.3 s;
アニメーション遅延: -0.3 秒。
}
.container 2 .circle 4 {
-webkit-animation-delay: -0.2 s;
アニメーション遅延: -0.2 秒。
}
.container 3 .circle 4 {
-webkit-アニメーション遅延: -0.1 秒;
アニメーション遅延: -0.1 秒。
}
@-webkit-keyframes bouncedelay {
0% , 80% , 100% { -webkit-transform:scale( 0.0 ) }
40% { -webkit-transform:scale( 1.0) }
}
@keyframes bouncedelay {
0% , 80% , 100% {
変換:scale( 0.0 );
-webkit-transform:scale( 0.0 );
} 40% {
変換:scale( 1.0 );
-webkit-transform:scale( 1.0 );
}
}
完整资源下ダウンロード
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7681
15
1639
14
1393
52
1286
25
1229
29
ユーザーがまれに発生する不具合: Samsung Watch スマートウォッチで突然白い画面の問題が発生する
Apr 03, 2024 am 08:13 AM
スマートフォンの画面に緑色の線が表示されるというトラブルに遭遇したことがある方もいると思いますし、見たことはなくても、関連する写真をインターネット上で見たことがあるはずです。では、スマートウォッチの画面が白くなってしまう状況に遭遇したことはありますか？ CNMOは4月2日、海外メディアから、Redditユーザーがサムスンウォッチシリーズのスマートウォッチの画面が白くなっている写真をソーシャルプラットフォームで共有したことを知った。ユーザーは、「出発時に充電していましたが、戻ってきたらこのようになっていました。再起動しようとしましたが、再起動プロセス中も画面はまだこのままでした。」Samsung Watch スマートウォッチの画面が白くなりました。 Reddit ユーザーはスマート ウォッチを指定していません。特定のモデルです。しかし、写真から判断すると、Samsung Watch5のはずです。以前、別のRedditユーザーも報告しました
![PowerPoint でアニメーションが機能しない [修正]](https://img.php.cn/upload/article/000/887/227/170831232982910.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
PowerPoint でアニメーションが機能しない [修正]
Feb 19, 2024 am 11:12 AM
プレゼンテーションを作成しようとしていますが、アニメーションを追加できませんか? Windows PC 上の PowerPoint でアニメーションが機能しない場合は、この記事が役に立ちます。これは多くの人が不満を抱く一般的な問題です。たとえば、Microsoft Teams でのプレゼンテーション中または画面録画中にアニメーションが停止する場合があります。このガイドでは、Windows 上の PowerPoint で動作しないアニメーションを修正するのに役立つさまざまなトラブルシューティング テクニックを説明します。 PowerPoint アニメーションが機能しないのはなぜですか? Windows 上で PowerPoint のアニメーションが機能しない問題を引き起こす可能性のある考えられる理由として、次のようなことが考えられます。
![Illustrator でのプラグインの読み込みエラー [修正]](https://img.php.cn/upload/article/000/465/014/170831522770626.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
Illustrator でのプラグインの読み込みエラー [修正]
Feb 19, 2024 pm 12:00 PM
Adobe Illustrator を起動すると、プラグインの読み込みエラーに関するメッセージが表示されますか?一部の Illustrator ユーザーは、アプリケーションを開いたときにこのエラーに遭遇しました。メッセージの後には、問題のあるプラグインのリストが続きます。このエラー メッセージは、インストールされているプラグインに問題があることを示していますが、Visual C++ DLL ファイルの破損や環境設定ファイルの破損など、他の理由によって発生する可能性もあります。このエラーが発生した場合は、この記事で問題を解決する方法を説明しますので、以下を読み続けてください。 Illustrator でのプラグインの読み込みエラー Adobe Illustrator を起動しようとしたときに「プラグインの読み込みエラー」エラー メッセージが表示された場合は、次の操作を行うことができます。 管理者として
九州風神アサシン4Sラジエターレビュー 空冷「アサシンマスター」スタイル
Mar 28, 2024 am 11:11 AM
ASSASSINといえば、プレイヤーの皆さんは必ず『アサシン クリード』に登場するマスターアサシンを思い浮かべると思いますが、彼らは熟練しただけではなく、「闇に身を捧げ、光に仕える」という信条を持っています。 - アプライアンス ブランド DeepCool の冷却ラジエーターが互いに一致します。このたび、シリーズ最新作「ASSASSIN4S」が登場し、上級者に新たな空冷体験をもたらす『スーツの暗殺者 アドバンスト』。外観はディテールに富んでいます. Assassin 4S ラジエーターはダブルタワー構造 + シングルファン内蔵設計を採用しています. 外側は立方体状のフェアリングで覆われており, 全体的な印象が強いです. ホワイトとブラックの2色が用意されています.さまざまな色に合う色。
Stremio の字幕が機能しない; 字幕の読み込みエラー
Feb 24, 2024 am 09:50 AM
Windows PC の Stremio で字幕が機能しませんか?一部の Stremio ユーザーは、ビデオに字幕が表示されないと報告しました。多くのユーザーが、「字幕の読み込みエラー」というエラー メッセージが表示されたと報告しています。このエラーとともに表示される完全なエラー メッセージは次のとおりです: 字幕の読み込み中にエラーが発生しました 字幕の読み込みに失敗しました: これは、使用しているプラグインまたはネットワークに問題がある可能性があります。エラー メッセージにあるように、インターネット接続がエラーの原因である可能性があります。したがって、ネットワーク接続を確認し、インターネットが適切に機能していることを確認してください。これとは別に、このエラーの背後には、競合する字幕アドオン、特定のビデオ コンテンツでサポートされていない字幕、古い Stremio アプリなど、他の理由が考えられます。のように
最初に入力してから終了するように ppt アニメーションを設定する方法
Mar 20, 2024 am 09:30 AM
私たちは日々の仕事で ppt をよく使用しますが、ppt のすべての操作機能に精通していますか?例: ppt でアニメーション効果を設定する方法、切り替え効果を設定する方法、各アニメーションの効果時間はどれくらいですか?各スライドは自動的に再生されますか、ppt アニメーションの開始と終了などはできますか? 今回は、まず ppt アニメーションの開始と終了の具体的な手順を共有します。以下にあります。友達、見に来てください。見て！ 1. まず、コンピューターで ppt を開き、テキスト ボックスの外側をクリックしてテキスト ボックスを選択します (下図の赤い丸で示されているように)。 2. 次に、メニューバーの[アニメーション]をクリックし、[消去]効果を選択します(図の赤丸部分)。 3. 次に、[
2年の遅れを経て、国産3Dアニメ映画『エル・ランシェン：深海竜』が7月13日に公開予定
Jan 26, 2024 am 09:42 AM
当サイトは1月26日、国産3Dアニメ映画『エル・ランシェン：深海竜』が最新スチールを公開し、7月13日に公開されると正式に発表したと報じた。 「Er Lang Shen: The Deep Sea Dragon」は、Mihuxing (Beijing) Movie Co., Ltd.、Horgos Zhonghe Qiancheng Film Co., Ltd.、Zhejiang Hengdian Film Co., Ltd.、Zhejiang Gongying Film によって制作されていることがわかります。 Tianhuo Technology Co., Ltd.とHuawen Image (Beijing) Film Co., Ltd.が制作し、Wang Junが監督したこのアニメーション映画は、当初、2022年7月22日に中国本土で公開される予定でした。 。このサイトのあらすじ：授与神の戦いの後、蒋子耶が神々を分割するために「授与神リスト」を持ち出し、授与神リストは天宮によって九州の深海に封印された秘密の領域。実は、授与神リストには神職以外にも強力な悪霊が数多く封印されている。
春の絶妙な光と影のアート、Haqu H2 は費用対効果の高い選択肢です
Apr 17, 2024 pm 05:07 PM
春の到来とともにあらゆるものが生き返り、あらゆるものが生命力と活力に満ち溢れます。この美しい季節、家庭生活に彩りを加えるにはどうすればよいでしょうか? Haqu H2 プロジェクターは、絶妙なデザインと超コストパフォーマンスで、この春に欠かせない美しさになりました。コンパクトでありながらスタイリッシュなH2プロジェクター。リビングルームのテレビキャビネットの上に置いても、寝室のベッドサイドテーブルの隣に置いても、美しい風景になります。乳白色のマットな質感のボディは、プロジェクターの高級感を演出するだけでなく、触り心地も向上させたデザインです。ベージュのレザー風の素材が全体の外観に温かみとエレガントさを加えます。この色と素材の組み合わせは、現代の住宅の美的傾向に準拠しているだけでなく、住宅に統合することもできます。
