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
个人申明：所分享博文，绝对原创，并力争每一个知识点都通过实战演示来进行验证。
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1359
52
Quatre outils de programmation assistés par IA recommandés
Apr 22, 2024 pm 05:34 PM
Cet outil de programmation assistée par l'IA a mis au jour un grand nombre d'outils de programmation assistée par l'IA utiles à cette étape de développement rapide de l'IA. Les outils de programmation assistés par l'IA peuvent améliorer l'efficacité du développement, améliorer la qualité du code et réduire les taux de bogues. Ils constituent des assistants importants dans le processus de développement logiciel moderne. Aujourd'hui, Dayao partagera avec vous 4 outils de programmation assistés par l'IA (et tous prennent en charge le langage C#). J'espère que cela sera utile à tout le monde. https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot est un assistant de codage IA qui vous aide à écrire du code plus rapidement et avec moins d'effort, afin que vous puissiez vous concentrer davantage sur la résolution de problèmes et la collaboration. Git
Comment configurer l'animation ppt pour entrer d'abord puis sortir
Mar 20, 2024 am 09:30 AM
Nous utilisons souvent ppt dans notre travail quotidien, alors connaissez-vous toutes les fonctions opérationnelles de ppt ? Par exemple : comment définir les effets d'animation dans ppt, comment définir les effets de commutation et quelle est la durée de l'effet de chaque animation ? Chaque diapositive peut-elle être lue automatiquement, entrer puis quitter l'animation ppt, etc. Dans le numéro d'aujourd'hui, je partagerai avec vous les étapes spécifiques d'entrée puis de sortie de l'animation ppt. Elles sont ci-dessous. 1. Tout d'abord, nous ouvrons ppt sur l'ordinateur, cliquez à l'extérieur de la zone de texte pour sélectionner la zone de texte (comme indiqué dans le cercle rouge dans la figure ci-dessous). 2. Ensuite, cliquez sur [Animation] dans la barre de menu et sélectionnez l'effet [Effacer] (comme indiqué dans le cercle rouge sur la figure). 3. Ensuite, cliquez sur [
Apprenez à développer des applications mobiles en utilisant le langage Go
Mar 28, 2024 pm 10:00 PM
Didacticiel d'application mobile de développement du langage Go Alors que le marché des applications mobiles continue de croître, de plus en plus de développeurs commencent à explorer comment utiliser le langage Go pour développer des applications mobiles. En tant que langage de programmation simple et efficace, le langage Go a également montré un fort potentiel dans le développement d'applications mobiles. Cet article présentera en détail comment utiliser le langage Go pour développer des applications mobiles et joindra des exemples de code spécifiques pour aider les lecteurs à démarrer rapidement et à commencer à développer leurs propres applications mobiles. 1. Préparation Avant de commencer, nous devons préparer l'environnement et les outils de développement. tête
Quel programmeur IA est le meilleur ? Explorez le potentiel de Devin, Tongyi Lingma et de l'agent SWE
Apr 07, 2024 am 09:10 AM
Le 3 mars 2022, moins d'un mois après la naissance de Devin, le premier programmeur d'IA au monde, l'équipe NLP de l'Université de Princeton a développé un agent SWE pour programmeur d'IA open source. Il exploite le modèle GPT-4 pour résoudre automatiquement les problèmes dans les référentiels GitHub. Les performances de l'agent SWE sur l'ensemble de tests du banc SWE sont similaires à celles de Devin, prenant en moyenne 93 secondes et résolvant 12,29 % des problèmes. En interagissant avec un terminal dédié, SWE-agent peut ouvrir et rechercher le contenu des fichiers, utiliser la vérification automatique de la syntaxe, modifier des lignes spécifiques et écrire et exécuter des tests. (Remarque : le contenu ci-dessus est un léger ajustement du contenu original, mais les informations clés du texte original sont conservées et ne dépassent pas la limite de mots spécifiée.) SWE-A
PHP pratique : exemple de code pour implémenter rapidement la séquence de Fibonacci
Mar 20, 2024 pm 02:24 PM
Pratique PHP : Exemple de code pour implémenter rapidement la séquence de Fibonacci La séquence de Fibonacci est une séquence très intéressante et courante en mathématiques. Elle est définie comme suit : le premier et le deuxième nombres sont 0 et 1, et à partir du troisième, en commençant par les nombres, chaque nombre. est la somme des deux nombres précédents. Les premiers nombres de la séquence de Fibonacci sont 0,1,1,2,3,5,8,13,21,... et ainsi de suite. En PHP, nous pouvons générer la séquence de Fibonacci par récursion et itération. Ci-dessous, nous montrerons ces deux
PHP est-il front-end ou back-end dans le développement Web ?
Mar 24, 2024 pm 02:18 PM
PHP appartient au backend du développement Web. PHP est un langage de script côté serveur, principalement utilisé pour traiter la logique côté serveur et générer du contenu Web dynamique. Par rapport à la technologie front-end, PHP est davantage utilisé pour les opérations back-end telles que l'interaction avec les bases de données, le traitement des demandes des utilisateurs et la génération du contenu des pages. Ensuite, des exemples de code spécifiques seront utilisés pour illustrer l'application de PHP dans le développement back-end. Tout d'abord, regardons un exemple de code PHP simple pour se connecter à une base de données et interroger des données :
Comprendre VSCode : à quoi sert cet outil ?
Mar 25, 2024 pm 03:06 PM
« Comprendre VSCode : à quoi sert cet outil ? » 》En tant que programmeur, que vous soyez débutant ou développeur expérimenté, vous ne pouvez pas vous passer de l'utilisation d'outils d'édition de code. Parmi les nombreux outils d'édition, Visual Studio Code (VSCode en abrégé) est très populaire parmi les développeurs en tant qu'éditeur de code open source, léger et puissant. Alors, à quoi sert exactement VSCode ? Cet article approfondira les fonctions et les utilisations de VSCode et fournira des exemples de code spécifiques pour aider les lecteurs.
Comment créer un orage animé dans un orage ppt
Mar 20, 2024 pm 02:41 PM
Parfois, nous rencontrons le besoin d'ajouter une animation à un ppt. Par exemple, si nous voulons créer un ppt d'orage et y ajouter des effets d'orage animés, que devons-nous faire ? Aujourd'hui, l'éditeur va vous présenter comment créer un orage animé en orage ppt. C'est en fait très simple, venez l'apprendre ! 1. Tout d'abord, nous ouvrons une page PPT, "Insérer" - "Forme" - "Forme de base" - "Forme éclair", comme indiqué sur l'image. 2. Dans l'onglet « Remplissage et ligne » à droite, sélectionnez « Remplissage » : blanc ; « Sélectionner » « Ligne » : noir, comme indiqué sur la figure. 3. Cliquez sur « Animation » – « Animation personnalisée » – « Ajouter un effet » – « Accentuation » – « Subtil » – « Sombre ou lumineux ».
