高速でクールな揺れアニメーション効果を実現するCSS

高速でクールな揺れアニメーション効果を実現するCSS

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. テキストの拡大縮小効果

ac817519e904d565088807ebffd940ec.png

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. 読み込みアニメーション

8a2883678ecba7c2a639925431bfe289.png

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. テキストを揺らす

22f97e304886a5f7e76bb9f4b623f549.png

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() メソッドの違いのまとめ

推薦する

Vue で動的なスタイルを実現するためのさまざまな方法のまとめ

目次1. 三項演算子の判定2. 動的に設定されるクラス3. 方法判定4. 配列バインディング5. e...

ウェブデザインの詳細分析に関する詳細な議論

設計業務では、設計者がレビューに参加したり、リーダーの一部が設計案の詳細が足りないと言っているのをよ...

JS での Reduce Fold Unfold の使用法の詳細な説明

目次折りたたむ(減らす) for...of の使用whileループの使用折り畳み実装に近い展開する配...

ドラッグフォトウォールを実現するネイティブJS

この記事では、ネイティブ JS で実装されたドラッグ可能な写真ウォールを紹介します。効果は次のとおり...

HTML における rel="nofollow" の役割と rel 属性の使用を分析する

リンクに rel="nofollow" 属性を追加すると、検索エンジンにこの接続...

Vueは虫眼鏡付きの検索ボックスを実装します

この記事では、Vueを使用して虫眼鏡付きの検索ボックスを実装する方法を紹介します。具体的な内容は次の...

VueはGraphVisを使用して無限に拡張された関係グラフを開発します

1. GraphVis 公式サイトにアクセスして、対応する js をダウンロードします。js の新し...

Ubuntuサーバーの一般的なコマンドの概要

以下のコマンドのほとんどは、コンソール/ターミナル/シェルで入力する必要があります。 'su...

MySQL関数の簡単な紹介

目次1. 数学関数2. 文字列関数3. 日付関数4. 暗号化機能主な MySQL 関数は次のように紹...

React のクラスからフックへの移行

目次リアクトフック序文なぜフックなのか?クラス関数クラスとフックの比較フックはコンポーネントの状態を...

Vueプロジェクトを大画面に適応させる方法の例

レムの簡単な分析まず、remはCSS単位です。pxの固定ピクセル単位と比較すると、remはより柔軟性...

MySQL マルチバージョン同時実行制御メカニズム (MVCC) ソースコードの詳細な説明

目次1. はじめに2. MVCC (マルチバージョン同時実行制御メカニズム) 2.1 繰り返し読み取...

Zabbix の psk 暗号化と zabbix_get 値の組み合わせ

Zabbix バージョン 3.0 以降、Zabbix サーバー、Zabbix プロキシ、Zabbix...

Springboot および Vue プロジェクトの Docker デプロイメントの実装手順

目次A. SpringbootプロジェクトのDockerデプロイメント1. Springbootプロ...