1. Animate.css の紹介Animate.css は、Web プロジェクトですぐに使用できるクロスブラウザ アニメーション ライブラリです。強調、フロントページ、スライダー、注意を誘導するプロンプトに最適です。海外製のCSS3アニメーションライブラリです。シェイク、フラッシュ、バウンス、フリップ、回転イン/回転アウト、フェードイン/フェードアウトなど、60種類以上のアニメーション効果がプリセットされており、一般的なアニメーション効果をほぼ網羅しています。 Animate.css を使用すると CSS3 アニメーション効果を簡単かつ迅速に作成できますが、 Animate.cssコードを確認することをお勧めします。そこから何かを学べるかもしれません。ウェブでもミニプログラムでも正常にご利用いただけます。詳細については公式アドレスをご覧ください。 2. アニメーション効果の実装使用中は、好みに応じて CSS コードを変更して、必要な効果を実現できます。記事内のアニメーション グラフィックは、特に直感的ではない可能性があります。学習に役立ち、アニメーション効果を直感的に体験できるコードを自分で記述することをお勧めします。 1. 光る箱 wxml コード: <view id="box">私はLetCodeです!</view> wxssコード: @keyframesアニメーション境界線{ 0% { ボックスシャドウ: 0 0 0 0 rgba(255,255,255,0.4); 100% { ボックスシャドウ: 0 0 0 20px rgba(255,255,255,0); } } #箱 { アニメーション: アニメーション ボーダー 1.5 秒 無限; 高さ: 100rpx; フォントファミリ: Arial; フォントサイズ: 18px; フォントの太さ: 太字; 色: 白; 境界線: 2px 実線; 境界線の半径: 10px; マージン: 100px 15px; 行の高さ: 100rpx; テキスト配置: 中央; } 2. テキストの拡大縮小効果 wxml コード: <view class="animate_zoomOutDown">さらに情報を共有するには、公開アカウント「Java Technology Fans」をフォローしてください。 </ビュー> wxssコード: @keyframes ズームアウトダウン { 40% { 不透明度: 1; 変換: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); アニメーションタイミング関数: 立方ベジェ(0.55, 0.055, 0.675, 0.19); } に { 不透明度: 0; 変換: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); アニメーションタイミング関数: 立方ベジェ(0.175, 0.885, 0.32, 1); } } .animate_zoomOutDown { アニメーション:2秒線形0秒無限交互ズームアウトダウン; フォントファミリ: Arial; フォントサイズ: 18px; フォントの太さ: 太字; 色: 白; 上マージン: 70px; テキスト配置: 中央; 上マージン: 15px; } 3. 読み込みアニメーション wxml コード: <view class="load-container load"> <view class="loader"> </ビュー> </ビュー> <view class="txt">さらに情報を共有するには、公開アカウント「Java Technology Fans」をフォローしてください。 </ビュー> wxssコード: .load-コンテナ { 幅: 240ピクセル; 高さ: 240px; マージン: 0 自動; 位置: 相対的; オーバーフロー: 非表示; ボックスのサイズ: 境界線ボックス; } .load .loader { 色: #ffffff; フォントサイズ: 90px; テキストインデント: -9999em; オーバーフロー: 非表示; 幅: 1em; 高さ: 1em; 境界線の半径: 50%; マージン: 72px 自動; 位置: 相対; 変換: translateZ(0); アニメーション: 1.7 秒の無限イーズをロードし、1.7 秒の無限イーズをラウンドします。 } @キーフレームの読み込み { 0% { ボックスの影: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; } 5%、95% { ボックスの影: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; } 10%、59% { ボックスの影: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; } 20% { ボックスシャドウ: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; } 38% { ボックスシャドウ: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; } 100% { ボックスシャドウ: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; } } @キーフレームラウンド { 0% { 変換: 回転(0度); } 100% { 変換: 回転(360度); } } 4. テキストを揺らす wxml コード: <view class="shake-slow txt">さらに情報を共有するには、公開アカウント「Java Technology Fans」をフォローしてください。 </ビュー> wxssコード: @keyframes ゆっくり振る { 2% { 変換: 移動(6px, -2px) 回転(3.5度); } 4% { 変換: translate(5px, 8px) rotate(-0.5deg); } 6% { 変換: translate(6px, -3px) 回転(-2.5deg); } 8% { 変換: translate(4px, -2px) 回転(1.5deg); } 10% { 変換: 移動(-6px, 8px) 回転(-1.5度); } 12% { 変換: translate(-5px, 5px) rotate(1.5deg); } 14% { 変換: translate(4px, 10px) 回転(3.5deg); } 16% { 変換: translate(0px, 4px) 回転(1.5deg); } 18% { 変換: translate(-1px, -6px) 回転(-0.5deg); } 20% { 変換: translate(6px, -9px) 回転(2.5deg); } 22% { 変換: translate(1px, -5px) 回転(-1.5deg); } 24% { 変換: translate(-9px, 6px) 回転(-0.5deg); } 26% { 変換: translate(8px, -2px) 回転(-1.5deg); } 28% { 変換: translate(2px, -3px) 回転(-2.5deg); } 30% { 変換: translate(9px, -7px) 回転(-0.5deg); } 32% { 変換: translate(8px, -6px) 回転(-2.5deg); } 34% { 変換: translate(-5px, 1px) 回転(3.5度); } 36% { 変換: translate(0px, -5px) 回転(2.5度); } 38% { 変換: translate(2px, 7px) 回転(-1.5度); } 40% { 変換: translate(6px, 3px) 回転(-1.5度); } 42% { 変換: translate(1px, -5px) rotate(-1.5deg); } 44% { 変換: translate(10px, -4px) 回転(-0.5deg); } 46% { 変換: translate(-2px, 2px) 回転(3.5度); } 48% { 変換: translate(3px, 4px) 回転(-0.5deg); } 50% { 変換: translate(8px, 1px) 回転(-1.5度); } 52% { 変換: translate(7px, 4px) 回転(-1.5度); } 54% { 変換: translate(10px, 8px) 回転(-1.5度); } 56% { 変換: translate(-3px, 0px) 回転(-0.5deg); } 58% { 変換: translate(0px, -1px) 回転(1.5度); } 60% { 変換: translate(6px, 9px) 回転(-1.5度); } 62% { 変換: translate(-9px, 8px) 回転(0.5deg); } 64% { 変換: translate(-6px, 10px) 回転(0.5deg); } 66% { 変換: translate(7px, 0px) 回転(0.5deg); } 68% { 変換: translate(3px, 8px) 回転(-0.5deg); } 70% { 変換: translate(-2px, -9px) 回転(1.5度); } 72% { 変換: translate(-6px, 2px) 回転(1.5度); } 74% { 変換: translate(-2px, 10px) 回転(-1.5deg); } 76% { 変換: translate(2px, 8px) 回転(2.5deg); } 78% { 変換: translate(6px, -2px) 回転(-0.5deg); } 80% { 変換: translate(6px, 8px) 回転(0.5deg); } 82% { 変換: translate(10px, 9px) 回転(3.5度); } 84% { 変換: translate(-3px, -1px) 回転(3.5度); } 86% { 変換: translate(1px, 8px) 回転(-2.5deg); } 88% { 変換: translate(-5px, -9px) 回転(2.5度); } 90% { 変換: translate(2px, 8px) 回転(0.5deg); } 92% { 変換: translate(0px, -1px) 回転(1.5度); } 94% { 変換: translate(-8px, -1px) 回転(0.5deg); } 96% { 変換: translate(-3px, 8px) 回転(-1.5deg); } 98% { 変換: 移動(4px, 8px) 回転(0.5度); } 0%,100% { 変換: 移動(0, 0) 回転(0); } } .ゆっくり振る { アニメーション:shake-slow 5s infinite easy-in-out; } 実際の開発プロセスでは、これらのクールなアニメーション効果よりもはるかに多くのものがあります。インターネットの急速な発展に伴い、機能要件を実現するためにより多くのプログラマーが必要になります。したがって、この記事では簡単に紹介するだけにします。続く... CSS で高速かつクールな揺れアニメーション効果を実現する方法についての記事はこれで終わりです。CSS 揺れ効果に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 |
<<: Windows で MySQL データベースを別のディスクに移動する
>>: JavaScript の find() メソッドと filter() メソッドの違いのまとめ
目次1. 三項演算子の判定2. 動的に設定されるクラス3. 方法判定4. 配列バインディング5. e...
設計業務では、設計者がレビューに参加したり、リーダーの一部が設計案の詳細が足りないと言っているのをよ...
目次折りたたむ(減らす) for...of の使用whileループの使用折り畳み実装に近い展開する配...
この記事では、ネイティブ JS で実装されたドラッグ可能な写真ウォールを紹介します。効果は次のとおり...
リンクに rel="nofollow" 属性を追加すると、検索エンジンにこの接続...
この記事では、Vueを使用して虫眼鏡付きの検索ボックスを実装する方法を紹介します。具体的な内容は次の...
1. GraphVis 公式サイトにアクセスして、対応する js をダウンロードします。js の新し...
以下のコマンドのほとんどは、コンソール/ターミナル/シェルで入力する必要があります。 'su...
目次1. 数学関数2. 文字列関数3. 日付関数4. 暗号化機能主な MySQL 関数は次のように紹...
注1: MySQLデータベースへの接続が遅い問題を解決するvim /etc/my.cnfコンテン...
目次リアクトフック序文なぜフックなのか?クラス関数クラスとフックの比較フックはコンポーネントの状態を...
レムの簡単な分析まず、remはCSS単位です。pxの固定ピクセル単位と比較すると、remはより柔軟性...
目次1. はじめに2. MVCC (マルチバージョン同時実行制御メカニズム) 2.1 繰り返し読み取...
Zabbix バージョン 3.0 以降、Zabbix サーバー、Zabbix プロキシ、Zabbix...
目次A. SpringbootプロジェクトのDockerデプロイメント1. Springbootプロ...