親愛なるネチズンの皆様、こんにちは。私は 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
個人的な声明: 共有されたブログ投稿は完全にオリジナルであり、私たちは実践的なデモンストレーションを通じてあらゆる知識ポイントを検証するよう努めています。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
