高速でクールな揺れアニメーション効果を実現する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. テキストの拡大縮小効果

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