コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5 キャンバスを使用して、picture_html5 チュートリアル スキルをクリックするとトリガーされる水の波紋エフェクトを作成します。

HTML5 キャンバスを使用して、picture_html5 チュートリアル スキルをクリックするとトリガーされる水の波紋エフェクトを作成します。

WBOY
リリース： 2016-05-16 15:47:29
オリジナル
2274 人が閲覧しました

今日は引き続き、JavaScript で実装されたエフェクトの例を紹介します。この記事では、水の波紋エフェクトを実現するための JavaScript の使用方法を紹介します。水の波の効果は背景として画像を使用し、画像上の任意の場所をクリックするとトリガーされます。場合によっては、プレーンな Javascript を使用して興味深いソリューションを作成できることがあります。

ソース コードのダウンロード

ステップ 1. HTML

前と同様、最初は HTML コードです:

コードをコピーします
コードは次のとおりです:


;

水滴エフェクト css/main.css " type="text/css" />
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート