ウェブフロントエンド
htmlチュートリアル
CSS3 実践開発: マウスオーバー画像アニメーション効果の開発方法をステップバイステップで教えます (パート 2)_html/css_WEB-ITnose
CSS3 実践開発: マウスオーバー画像アニメーション効果の開発方法をステップバイステップで教えます (パート 2)_html/css_WEB-ITnose
親愛なるネチズンの皆様、こんにちは。私は Mo Mo として知られる Mo Shang Huai Kai です。前の記事 「CSS3 の実践的な開発: マウスオーバー画像アニメーションの特殊効果を開発する方法を段階的に教えます」 で、私はマウスをロールオーバーしたときのアニメーション効果を開発しました。
この記事では、別のアニメーション特殊効果の開発について説明します。インスピレーションを得られることを願っています。いつものように、ソース コードのダウンロードは提供しませんが、このチュートリアルのコードをステップごとにローカル コンピューターにコピーする限り、元のポスターと同じ操作効果が得られることは保証できます。
さて、早速今日の勉強に入りましょう。筆者は怠け者なので、前回の記事のネタをそのまま流用しています。
まず、今日実装する必要がある特殊効果を見てみましょう:
1. マウスが通過する前:
2. マウスが通過すると、最初に灰色のカバーの背景がスムーズに表示されます。をクリックすると、検索アイコンがスムーズに表示されます:
レンダリングを読んだ後は、この CSS3 実践の旅 に直接アクセスしてください。
まず、HTML コードを編集します。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles"> <meta name="keywords" content="css,css3,鼠标划过动画效果,css3实战开发,css3案例" /> <title>css3实现鼠标划过图片时效果(1)</title> </head> <body> <a href="http://www.itdriver.cn">实战互联网</a> <div class="container"> <div class="<strong>photowall</strong>"> <div class="<strong>photoview</strong>"> <a href="http://www.itdriver.cn"><img src="img01.jpg" width="320" height="200" /></a> <div class="<strong>mask</strong>"><a href="http://www.itdriver.cn">实战互联网</a></div> </div> <div class="<strong>photoview</strong>"> <a href="http://www.itdriver.cn"><img src="img02.jpg" width="320" height="200" /></a> <div class="<strong>mask</strong>"><a href="http://www.itdriver.cn">实战互联网</a></div> </div> </div> </div> </body></html>
上記のレンダリングに基づいて、どの div にスタイルを適用するかを知ることができます。
1. 背景紙を壁に適用します。パディングを実現するためにスタイルを写真に追加します。
3. カバーレイヤーを設定します。
どのようなスタイルを実行する必要があるかがわかったので、スタイルのコーディングに直接進みます。
最初にコンテナが中央に表示されるようにコンテナのスタイルを設定します。コードは次のとおりです:
*{ /* 清空所有元素内外边距*/ margin:0; padding:0;}html,body,.container{ /*设置container高度浏览器自适应*/ height:100%; }.container { /*设置container容器样式*/ width:80%; margin:auto; padding:10px;}次に、スタイルを写真の壁に適用し、壁紙を貼り付けて設定します。コードは次のとおりです:
.photowall{ background:url(bg.png); /*设置照片墙背景*/ background-size:cover; /*设置背景以最小值填充*/ height:500px; /*设置照片墙的高度*/}まずこの時点でのページの実行効果を見てみましょう:
次に、
CSS3のボックス モデル属性を適用して写真を中央に配置します。コードは次のとおりです。
.photowall{ background:url(bg.png); /*设置照片墙背景*/ background-size:cover; /*设置背景以最小值填充*/ height:500px; /*设置照片墙的高度*/ display:-webkit-box; /*应用盒子模型*/ display:-moz-box; display:-o-box; display:box; -webkit-box-pack:center; /*使盒子内元素水平居中*/ -moz-box-pack:center; -o-box-pack:center; box-pack:center; -webkit-box-align:center; /* 设置盒子内元素垂直方向上居中分配空间*/ -moz-box-align:center; -o-box-align:center; box-align:center;}次に、写真に影効果を追加し、写真の内側の境界線を設定します。 コードは次のとおりです。
全体的な外観。写真が出てきたら、カバーのサイズを調整し、絶対配置(親コンテナの相対配置が使用されています)を使用し、カバーマスクの位置を調整し、カバーに
transition属性を適用します。 transition 属性についてはあまり知りません。私の他のブログ投稿に注目してください)、コードは次のとおりです:
.photoview .mask{ position:absolute; /*由于父容器设置了position:relative,所以子元素可以相对父容器做绝对定位*/ top:0; left:0; height: 216px; /*设置遮盖物的宽高*/ line-height:216px; width: 332px; display: inline-block; background:rgba(0, 0, 0, 0.7); /*设置背景半透明*/ opacity:0; /*设置遮盖物为透明的*/ visibility:hidden; /*设置遮盖物是不可见可见的*/ -moz-transition:all 0.4s ease-in-out; /*设置transition属性，一旦遮盖物属性发生变化时，进行平滑动画过度*/ -webkit-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out; -ms-transition:all 0.4s ease-in-out; transition:all 0.4s ease-in-out;}この時点で、ページを実行して現在のページの表示を見てみましょう効果:
次に、画像にアニメーション効果を追加したいので、検索アイコンを追加しましょう。そこで、a タグにtransition属性を追加します。コードは次のとおりです。
.photoview .mask a{ background:url(link.png) center no-repeat; /*给遮盖物上的a标签应用样式*/ display:inline-block; height:20px; width:20px; overflow:hidden; text-decoration: none; text-indent:-9999; opacity:0; /*设置a标签默认为透明*/ -moz-transition:all 0.3s ease-in-out; /*一旦a标签属性发生变化时，进行平滑动画过度*/ -webkit-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;}
についてトランジション属性について簡単に説明します。要素がトランジション属性を適用すると、将来のイベントによってこの要素の属性が変更されると、スムーズなアニメーショントランジションになります。これはまさに私たちが期待していることなので、上でアニメーション化する必要があるカバーと検索アイコンにこの属性を追加しました。
最初にご紹介した効果「
2. マウスを移動すると、まずグレーのカバー背景が滑らかに表示され、その後検索アイコンが滑らかに遷移して表示されます:」に従っていますので、ここではマウスが写真の上に移動すると、写真にホバーイベントを追加します。写真を撮影するときに、カバーと検索アイコンの属性をそれぞれリセットします。コードは次のとおりです。
.photoview:hover .mask { /*当鼠标划过照片时，将遮盖物设为不透明，将遮盖物可见的*/ opacity: 1; background:rgba(0, 0, 0, 0.7); visibility:visible;}検索アイコンの場合、より良いアニメーション効果を表示するには、次のように設定します: 0.3 秒の実行を遅延します。 アニメーション、コードは次のとおりです:
.photoview:hover .mask a{ /*当鼠标划过照片时，将a标签设为不透明，且延迟0.3秒显示*/ opacity: 1; -moz-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s;}この時点でコードは記述されているので、効果を見てみましょう:
予想通り、期待通りの効果が得られました。
もちろん、検索アイコンの遅延エフェクトについては、合成メソッドを直接使用して、上記と同じ
-moz-transition:all 0.3s ease-in-out;修改为
-moz-transition:all 0.3s ease-in-out <strong>0.3s</strong>;最后的0.3s代表动画效果，延时多长时间后执行。
エフェクトを作成することもできます。ここではそれを説明しません。
このチュートリアルは以上です。読んでいただいた皆様、ありがとうございました。
インターネット技術交換グループへようこそ: 62329335
個人的な声明: 共有されたブログ投稿は完全にオリジナルであり、私たちは実践的なデモンストレーションを通じてあらゆる知識ポイントを検証するよう努めています。
ホット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）
ホットトピック
おすすめのAI支援プログラミングツール4選
Apr 22, 2024 pm 05:34 PM
この AI 支援プログラミング ツールは、急速な AI 開発のこの段階において、多数の有用な AI 支援プログラミング ツールを発掘しました。 AI 支援プログラミング ツールは、開発効率を向上させ、コードの品質を向上させ、バグ率を減らすことができます。これらは、現代のソフトウェア開発プロセスにおける重要なアシスタントです。今日は Dayao が 4 つの AI 支援プログラミング ツールを紹介します (すべて C# 言語をサポートしています)。皆さんのお役に立てれば幸いです。 https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot は、より少ない労力でより迅速にコードを作成できるようにする AI コーディング アシスタントであり、問題解決とコラボレーションにより集中できるようになります。ギット
最初に入力してから終了するように ppt アニメーションを設定する方法
Mar 20, 2024 am 09:30 AM
私たちは日々の仕事で ppt をよく使用しますが、ppt のすべての操作機能に精通していますか?例: ppt でアニメーション効果を設定する方法、切り替え効果を設定する方法、各アニメーションの効果時間はどれくらいですか?各スライドは自動的に再生されますか、ppt アニメーションの開始と終了などはできますか? 今回は、まず ppt アニメーションの開始と終了の具体的な手順を共有します。以下にあります。友達、見に来てください。見て！ 1. まず、コンピューターで ppt を開き、テキスト ボックスの外側をクリックしてテキスト ボックスを選択します (下図の赤い丸で示されているように)。 2. 次に、メニューバーの[アニメーション]をクリックし、[消去]効果を選択します(図の赤丸部分)。 3. 次に、[
Go 言語を使用してモバイル アプリケーションを開発する方法を学ぶ
Mar 28, 2024 pm 10:00 PM
Go 言語開発モバイル アプリケーション チュートリアル モバイル アプリケーション市場が活況を続ける中、ますます多くの開発者が Go 言語を使用してモバイル アプリケーションを開発する方法を検討し始めています。シンプルで効率的なプログラミング言語として、Go 言語はモバイル アプリケーション開発でも大きな可能性を示しています。この記事では、Go 言語を使用してモバイル アプリケーションを開発する方法を詳しく紹介し、読者がすぐに始めて独自のモバイル アプリケーションの開発を開始できるように、具体的なコード例を添付します。 1. 準備 始める前に、開発環境とツールを準備する必要があります。頭
どのAIプログラマーが一番優れているでしょうか? Devin、Tongyi Lingma、SWE エージェントの可能性を探る
Apr 07, 2024 am 09:10 AM
世界初の AI プログラマー Devin の誕生から 1 か月も経たない 2022 年 3 月 3 日、プリンストン大学の NLP チームはオープンソース AI プログラマー SWE-agent を開発しました。 GPT-4 モデルを利用して、GitHub リポジトリの問題を自動的に解決します。 SWE ベンチ テスト セットにおける SWE エージェントのパフォーマンスは Devin と同様で、平均 93 秒かかり、問題の 12.29% を解決しました。専用端末と対話することで、SWE エージェントはファイルの内容を開いて検索したり、自動構文チェックを使用したり、特定の行を編集したり、テストを作成して実行したりできます。 (注: 上記の内容は元の内容を若干調整したものですが、原文の重要な情報は保持されており、指定された文字数制限を超えていません。) SWE-A
PHP 実践: フィボナッチ数列をすばやく実装するコード例
Mar 20, 2024 pm 02:24 PM
PHP の実践: フィボナッチ数列をすばやく実装するためのコード例 フィボナッチ数列は、数学では非常に興味深い一般的な数列です。次のように定義されています: 最初と 2 番目の数値は 0 と 1、3 番目からは数値で始まり、それぞれの数値前の 2 つの数値の合計です。フィボナッチ数列の最初のいくつかの数値は、0、1、1.2、3、5、8、13、21 などです。 PHP では、再帰と反復を通じてフィボナッチ数列を生成できます。以下ではこの２つを紹介していきます
PHP は Web 開発におけるフロントエンドですか、それともバックエンドですか?
Mar 24, 2024 pm 02:18 PM
PHP は Web 開発のバックエンドに属します。 PHP はサーバー側のスクリプト言語であり、主にサーバー側のロジックを処理し、動的な Web コンテンツを生成するために使用されます。フロントエンド テクノロジーと比較して、PHP はデータベースとの対話、ユーザー リクエストの処理、ページ コンテンツの生成などのバックエンド操作に多く使用されます。次に、特定のコード例を使用して、バックエンド開発における PHP のアプリケーションを説明します。まず、データベースに接続してデータをクエリするための簡単な PHP コード例を見てみましょう。
VSCode について: このツールは何に使用されますか?
Mar 25, 2024 pm 03:06 PM
「VSCode について: このツールは何に使用されますか?」 》初心者でも経験豊富な開発者でも、プログラマーとしてはコード編集ツールを使わずにはいられません。数ある編集ツールの中でも、Visual Studio Code (略して VSCode) は、オープンソースで軽量かつ強力なコード エディターとして開発者の間で非常に人気があります。では、VSCode は正確に何に使用されるのでしょうか?この記事では、VSCode の機能と使用法を詳しく説明し、読者に役立つ具体的なコード例を提供します。
雷雨PPTでアニメーション雷雨を作成する方法
Mar 20, 2024 pm 02:41 PM
時々、ppt にアニメーションを追加する必要がある場合があります。たとえば、雷雨の ppt を作成し、それにアニメーションの雷雨効果を追加したい場合、どうすればよいでしょうか?今日は編集者が雷雨pptでアニメーション雷雨を作る方法を紹介します。実はとても簡単なので、ぜひ学んでください! 1. まず、図に示すように、「挿入」-「図形」-「基本図形」-「稲妻図形」のPPTページを開きます。 2. 右側の「塗りと線」タブで、図のように「塗り」：白、「選択」「線」：黒を選択します。 3.「アニメーション」－「カスタムアニメーション」－「効果の追加」－「強調」－「微妙」－「ちらつき」をクリックし、
