CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效(第二弹)_html/css_WEB-ITnose
各位网友，大家好，我是陌上花会开，人称陌陌，在上一篇文章《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="/static/imghw/default1.png" data-src="img01.jpg" class="lazy" style="max-width:90%" style="max-width:90%" / alt="CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效(第二弹)_html/css_WEB-ITnose" ></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="/static/imghw/default1.png" data-src="img02.jpg" class="lazy" style="max-width:90%" style="max-width:90%" / alt="CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效(第二弹)_html/css_WEB-ITnose" ></a> <div class="<strong>mask</strong>"><a href="http://www.itdriver.cn">实战互联网</a></div> </div> </div> </div> </body></html>
我们根据上面的效果图，大概可以知道要对哪几个div应用样式：
1. 给墙按上背景纸;
2.给照片应用样式，实现内边距补白;
3.设置一遮盖层;
好了，既然知道需要做哪些样式了，直接进入样式编码吧！
我们首先给container设置样式，使容器居中显示，代码如下:
*{ /* 清空所有元素内外边距*/ margin:0; padding:0;}html,body,.container{ /*设置container高度浏览器自适应*/ height:100%; }.container { /*设置container容器样式*/ width:80%; margin:auto; padding:10px;}紧接着，我们给照片墙应用样式，给它贴上壁纸，同时设置它的高度为500px，代码如下:
.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;}
对于transition属性，这里我给大家对做个简单介绍，当一个元素应用了transition属性时，如果以后因为某一事件导致此元素的属性发生变化，则会进行平滑的动画过渡效果。这个正是我们所期待的，所以我给上面需要实现动画的遮盖物以及搜索图标都加上了这个属性。
根据最开始我给大家展示的效果“2. 鼠标划过时，先平滑显示灰色遮盖物背景，接着平滑过渡显示搜索图标：”，所以这里我们给照片添加hover事件，当鼠标划过照片时，我们分别重新设定遮盖物的属性和搜索图标的属性，代码如下：
.photoview:hover .mask { /*当鼠标划过照片时，将遮盖物设为不透明，将遮盖物可见的*/ opacity: 1; background:rgba(0, 0, 0, 0.7); visibility:visible;}对于搜索图标，为了显示更好的动画效果，我们同时给她设定：延时0.3s执行动画，代码如下所示：
.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 Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
四款值得推薦的AI輔助程式工具
Apr 22, 2024 pm 05:34 PM
這個AI輔助程式工具在這個AI快速發展的階段，挖掘出了一大批好用的AI輔助程式工具。 AI輔助程式設計工具能夠提升開發效率、提升程式碼品質、降低bug率，是現代軟體開發過程中的重要助手。今天大姚給大家分享4款AI輔助程式工具（而且都支援C#語言），希望對大家有幫助。 https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot是一款AI編碼助手，可幫助你更快、更省力地編寫程式碼，從而將更多精力集中在問題解決和協作上。 Git
AI程式設計師哪家強？探索Devin、通靈靈碼和SWE-agent的潛力
Apr 07, 2024 am 09:10 AM
2022年3月3日，距離世界首個AI程式設計師Devin誕生不足一個月，普林斯頓大學的NLP團隊開發了一個開源AI程式設計師SWE-agent。它利用GPT-4模型在GitHub儲存庫中自動解決問題。 SWE-agent在SWE-bench測試集上的表現與Devin相似，平均耗時93秒，解決了12.29%的問題。 SWE-agent透過與專用終端交互，可以開啟、搜尋文件內容，使用自動語法檢查、編輯特定行，以及編寫和執行測試。 （註：以上內容為原始內容微調，但保留了原文中的關鍵訊息，未超過指定字數限制。）SWE-A
學習如何利用Go語言開發行動應用程式
Mar 28, 2024 pm 10:00 PM
Go語言開發行動應用程式教學隨著行動應用程式市場的不斷蓬勃發展，越來越多的開發者開始探索如何利用Go語言開發行動應用程式。作為一種簡潔高效的程式語言，Go語言在行動應用開發中也展現了強大的潛力。本文將詳細介紹如何利用Go語言開發行動應用程序，並附上具體的程式碼範例，幫助讀者快速入門並開始開發自己的行動應用程式。一、準備工作在開始之前，我們需要準備好開發環境和工具。首
ppt動畫如何設定先進入再退出
Mar 20, 2024 am 09:30 AM
我們在日常的辦公中常常會使用到ppt，那麼你是否對ppt裡邊的每個操作功能都很了解呢？例如：ppt中怎麼設定動畫效果、怎麼設定切換效果、每個動畫的效果長度是多少？每個投影片能不能自動播放、ppt動畫先進入再退出等等，那麼今天這期我就先跟大家分享ppt動畫先進入再退出的具體操作步驟，就在下方，小伙伴們快來看一看吧！ 1.首先，我們在電腦中開啟ppt，點選文字方塊外側選取文字框，（如下圖紅色圈出部分所示）。 2.然後，點選選單列中的【動畫】，選取【擦除】的效果，（如圖紅色圈出部分所示）。 3.接下來，點擊【
PHP實戰：快速實作斐波那契數列的程式碼範例
Mar 20, 2024 pm 02:24 PM
PHP實戰：快速實現斐波那契數列的程式碼範例斐波那契數列是數學中一個非常有趣且常見的數列，其定義如下：第一個和第二個數為0和1，從第三個數開始，每個數都是前兩個數的和。斐波那契數列的前幾個數字依序為0,1,1.2,3,5,8,13,21,...依此類推。在PHP中，我們可以透過遞歸和迭代兩種方式來實現斐波那契數列的生成。下面我們分別來展示這兩
Android開發最適合的Linux發行版是哪一個？
Mar 14, 2024 pm 12:30 PM
Android開發是一項繁忙而又令人興奮的工作，而選擇適合的Linux發行版來進行開發則顯得尤為重要。在眾多的Linux發行版中，究竟哪一個最適合Android開發呢？本文將從幾個方面來探討這個問題，並給出具體的程式碼範例。首先，我們來看看目前流行的幾個Linux發行版：Ubuntu、Fedora、Debian、CentOS等，它們都有各自的優點和特點。
Go語言前端技術探秘：前端開發新視野
Mar 28, 2024 pm 01:06 PM
Go語言作為一種快速、高效的程式語言，在後端開發領域廣受歡迎。然而，很少有人將Go語言與前端開發聯繫起來。事實上，使用Go語言進行前端開發不僅可以提高效率，還能為開發者帶來全新的視野。本文將探討使用Go語言進行前端開發的可能性，並提供具體的程式碼範例，幫助讀者更了解這一領域。在傳統的前端開發中，通常會使用JavaScript、HTML和CSS來建立使用者介面
雷雨ppt中動畫雷雨該如何製作
Mar 20, 2024 pm 02:41 PM
有時候我們會遇到需要在ppt中加入動畫的需求，例如如果我們想要做一張雷雨ppt，想在裡面加一些動畫雷雨效果，這該怎麼辦呢？今天，小編就來為大家介紹一下雷雨ppt中動畫雷雨該如何製作，其實很簡單，快來學起來吧！ 1.首先我們打開一張PPT的頁面，“插入”——“形狀”——“基本形狀”——“閃電形”，如圖所示。 2.在右側的「填滿與線條」標籤裡面，「填滿」選擇：白色；「線條」選擇：黑色，具體如圖。 3.依序點擊“動畫”——“自訂動畫”——“添加效果”——“強調”——“細微型”——“忽明忽暗”，
