アニメーション効果の読み込み (後で使用するために収集)_html/css_WEB-ITnose
动画效果一：
html代码：
CSS代码：
.spinner {
margin : 100px auto ;
width : 50px ;
height : 60px ;
text-align : center ;
font-size : 10px ;
}
.spinner > div {
background-color : #67CF22 ;
height : 100% ;
width : 6px ;
display : inline- block ;
-webkit-animation: stretchdelay 1.2 s infinite ease-in-out;
animation: stretchdelay 1.2 s infinite ease-in-out;
}
.spinner .rect 2 {
-webkit-animation-delay: -1.1 s;
animation-delay: -1.1 s;
}
.spinner .rect 3 {
-webkit-animation-delay: -1.0 s;
animation-delay: -1.0 s;
}
.spinner .rect 4 {
-webkit-animation-delay: -0.9 s;
animation-delay: -0.9 s;
}
.spinner .rect 5 {
-webkit-animation-delay: -0.8 s;
animation-delay: -0.8 s;
}
@-webkit-keyframes stretchdelay {
0% , 40% , 100% { -webkit-transform: scaleY( 0.4 ) }
20% { -webkit-transform: scaleY( 1.0 ) }
}
@keyframes stretchdelay {
0% , 40% , 100% {
transform: scaleY( 0.4 );
-webkit-transform: scaleY( 0.4 );
} 20% {
transform: scaleY( 1.0 );
-webkit-transform: scaleY( 1.0 );
}
}
动画效果二：
HTML代码：
CSS代码：
.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);
}
}
动画效果三：
HTML代码：
CSS代码：
.spinner {
width : 60px ;
height : 60px ;
position : relative ;
margin : 100px auto ;
}
.double-bounce 1 , .double-bounce 2 {
width : 100% ;
height : 100% ;
border-radius: 50% ;
background-color : #67CF22 ;
opacity: 0.6 ;
position : absolute ;
top : 0 ;
left : 0 ;
-webkit-animation: bounce 2.0 s infinite ease-in-out;
animation: bounce 2.0 s infinite ease-in-out;
}
.double-bounce 2 {
-webkit-animation-delay: -1.0 s;
animation-delay: -1.0 s;
}
@-webkit-keyframes bounce {
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 );
}
}
动画效果四：
HTML代码：
CSS代码：
.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-transフォーム：translateX ( 42px ) 変換Y( 42ピクセル ) 回転( -180 度) }
75% { -webkit-transform:translateX( 0px ) 変換Y( 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% {
transform: 変換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);
-webkit-transform: rotate( -360 deg);
}
}
动画效果五：
HTML代码：
CSS代码：
.spinner {
margin : 100px auto ;
幅: 90px ;
高さ : 90px ;
位置 : 相対的;
text-align : center ;
-webkit-animation: 2.0 秒の無限リニア回転。
アニメーション: 2.0 秒の無限リニア回転。
}
.dot 1 , .dot 2 {
width : 60% ;
高さ: 60% ;
表示 : インラインブロック ;
位置: 絶対;
トップ : 0 ;
背景色 : #67CF22 ;
境界半径: 100% ;
-webkit-animation: バウンス 2.0 秒の無限イーズインアウト。
アニメーション: バウンス 2.0 秒、無限イーズインアウト。
}
.dot 2 {
トップ : 自動 ;
下 : 0px ;
-webkit-アニメーション遅延: -1.0 秒;
アニメーション遅延: -1.0 秒;
}
@-webkit-keyframes 回転 { 100% { -webkit-transform: 回転( 360 度) }}
@keyframes 回転 { 100% { 変換: 回転( 360 度); -webkit-transform: 回転( 360 度) }}
@-webkit-keyframes bounce {
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 );
}
}
动画效果六：
HTML代码：
CSS代コード：
.spinner {
margin : 100px auto 0 ;
幅: 150px ;
text-align : center ;
}
.スピナー > div {
幅 : 30px ;
高さ : 30px ;
背景色 : #67CF22 ;
境界半径: 100% ;
表示 : インラインブロック ;
-webkit-animation: バウンス遅延 1.4 秒、無限のイーズインアウト。
アニメーション: バウンスディレイ 1.4 秒、無限イーズインアウト。
/* アニメーションの開始時に最初のフレームがちらつかないようにします */
-webkit-animation-fill-mode: Both ;
アニメーションフィルモード: 両方 ;
}
.spinner .bounce 1 {
-webkit-animation-delay: -0.32 s;
アニメーション遅延: -0.32 秒;
}
.spinner .bounce 2 {
-webkit-animation-delay: -0.16 s;
アニメーション遅延: -0.16 秒;
}
@-webkit-keyframes bouncedelay {
0% , 80% , 100% { -webkit-transform:scale( 0.0 ) }
40% { -webkit-transform:scale( 1 .0) }
}
@keyframes bouncedelay {
0% , 80% , 100% {
transform:scale( 0.0 );
-webkit-transform:scale( 0.0 );
} 40% {
transform: scale( 1.0 );
-webkit-transform: scale( 1.0 );
}
}
动画效果七：
HTML代码：
CSS代码：
.spinner {
width : 40px ;
高さ: 40px ;
マージン: 100px 自動;
背景色 : #333 ;
境界半径: 100% ;
-webkit-animation: スケールアウト 1.0 秒の無限イーズインアウト。
アニメーション: スケールアウト 1.0 秒の無限イーズインアウト。
}
@-webkit-keyframes スケールアウト {
0% { -webkit-transform:scale( 0.0 ) }
100% {
-webkit-transform:scale( 1.0);
不透明度: 0 ;
}
}
@keyframes スケールアウト {
0% {
変換:scale( 0.0 );
-webkit-transform:scale( 0.0 );
} 100% {
変換:scale( 1.0 );
-webkit-transform:scale( 1.0 );
不透明度: 0 ;
}
}
アニメ画效果八：
HTML代：
CSS代码：
.spinner {
margin : 100px auto ;
幅: 20px ;
高さ: 20px ;
位置 : 相対的;
}
.container 1 > div、.container 2 > div、.container 3 > div {
width : 6px ;
高さ: 6px ;
背景色 : #333 ;
境界半径: 100% ;
位置: 絶対;
-webkit-animation: バウンス遅延 1.2 秒、無限のイーズインアウト。
アニメーション: bouncedelay 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-animation-delay: -0.1 s;
アニメーション遅延: -0.1 秒;
}
@-webkit-keyframes bouncedelay {
0% , 80% , 100% { -webkit-transform:scale( 0.0 ) }
40% { -webkit-transform:scale( 1 .0) }
}
@keyframes bouncedelay {
0% , 80% , 100% {
transform:scale( 0.0 );
-webkit-transform:scale( 0.0 );
} 40% {
変換: スケール( 1.0 );
-webkit-transform:scale( 1.0 );
}
}
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7334
9
1627
14
1352
46
1264
25
1209
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 のアニメーションが機能しない問題を引き起こす可能性のある考えられる理由として、次のようなことが考えられます。
Douyinにソーダミュージックの曲を追加する方法
Feb 23, 2024 pm 04:52 PM
ソーダ ミュージックの曲を Douyin に追加するにはどうすればよいですか? ソーダ ミュージック APP の曲は Douyin プラットフォームに同期できますが、ほとんどの友達はソーダ ミュージックの曲を Douyin に追加する方法を知りません。次に、エディターがユーザーをガイドします。これがチュートリアルです。ソーダミュージックの曲をDouyinに追加する方法について説明していますので、興味のあるユーザーはぜひご覧ください。ソーダミュージックの使用方法に関するチュートリアル. ソーダミュージックの曲をDouyinに追加する方法. 1. まずソーダミュージックアプリを開き、メインページの下部にある[音楽]アイコンをクリックしてページに入ります; 2. 次に、曲をクリックします再生ページで、[下の図の矢印で示すように] [共有] ボタンをクリックします; 3. 最後に、下に展開された機能バーで [Douyin] アイコンを選択し、対応するプラットフォームに共有します。
最初に入力してから終了するように ppt アニメーションを設定する方法
Mar 20, 2024 am 09:30 AM
私たちは日々の仕事で ppt をよく使用しますが、ppt のすべての操作機能に精通していますか?例: ppt でアニメーション効果を設定する方法、切り替え効果を設定する方法、各アニメーションの効果時間はどれくらいですか?各スライドは自動的に再生されますか、ppt アニメーションの開始と終了などはできますか? 今回は、まず ppt アニメーションの開始と終了の具体的な手順を共有します。以下にあります。友達、見に来てください。見て！ 1. まず、コンピューターで ppt を開き、テキスト ボックスの外側をクリックしてテキスト ボックスを選択します (下図の赤い丸で示されているように)。 2. 次に、メニューバーの[アニメーション]をクリックし、[消去]効果を選択します(図の赤丸部分)。 3. 次に、[
九州風神アサシン4Sラジエターレビュー 空冷「アサシンマスター」スタイル
Mar 28, 2024 am 11:11 AM
ASSASSINといえば、プレイヤーの皆さんは必ず『アサシン クリード』に登場するマスターアサシンを思い浮かべると思いますが、彼らは熟練しただけではなく、「闇に身を捧げ、光に仕える」という信条を持っています。 - アプライアンス ブランド DeepCool の冷却ラジエーターが互いに一致します。このたび、シリーズ最新作「ASSASSIN4S」が登場し、上級者に新たな空冷体験をもたらす『スーツの暗殺者 アドバンスト』。外観はディテールに富んでいます. Assassin 4S ラジエーターはダブルタワー構造 + シングルファン内蔵設計を採用しています. 外側は立方体状のフェアリングで覆われており, 全体的な印象が強いです. ホワイトとブラックの2色が用意されています.さまざまな色に合う色。
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プロジェクター。リビングルームのテレビキャビネットの上に置いても、寝室のベッドサイドテーブルの隣に置いても、美しい風景になります。乳白色のマットな質感のボディは、プロジェクターの高級感を演出するだけでなく、触り心地も向上させたデザインです。ベージュのレザー風の素材が全体の外観に温かみとエレガントさを加えます。この色と素材の組み合わせは、現代の住宅の美的傾向に準拠しているだけでなく、住宅に統合することもできます。
Huntkey MX750P フルモジュール電源レビュー: 750W の集中プラチナ強度
Mar 28, 2024 pm 03:20 PM
コンパクトなサイズで究極の独自の美しさを追求する多くのプレイヤーを魅了するITXプラットフォームは、製造プロセスの改善と技術の進歩により、インテルの第14世代CoreおよびRTX40シリーズのグラフィックスカードの両方がITXプラットフォーム上で強みを発揮することができ、ゲーマーも SFX 電源にはより高い要件があります。ゲーム愛好家である Huntkey は、高性能要件を満たす ITX プラットフォームにおいて、最大 750W の定格電力を備え、80PLUS プラチナ レベルの認証を取得した、新しい MX シリーズ電源を発売しました。以下にこの電源の評価を示します。 Huntkey MX750P フルモジュール電源は、シンプルでファッショナブルなデザインコンセプトを採用しており、プレイヤーに合わせて選択できるブラックとホワイトの 2 つのモデルがあり、どちらもマットな表面処理が施されており、シルバーグレーとレッドのフォントで質感が優れています。
