CSS3学习笔记（4）-上下滑动展开的按钮_html/css_WEB-ITnose
Jun 24, 2016 am 11:35 AM
好吧，我最近没有什么进步，其实吧，我在偷懒耶，这几天太冷落代码了，都在做设计，晕乎乎的，
下面来看看我以前写的一个上下滑动展开的按钮效果：
这类的效果经常会在一些网站页面下载按钮处看到，当你鼠标悬浮在下载按钮时，会提醒你是否已注册，或者点击登录什么的小提示~~~~~
一、页面的主体布局
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link type="text/css" rel="stylesheet" href="css/both_slid_menu.css" /> </head> <body> <div class="both_sild_menu"> <div class="sild_top">我是上面</div> <a href="#" target="_blank">鼠标放在我上面试试</a> <div class="sild_bottom">我是下面</div> </div> </body></html>
布局就不多说了，很简单~~~~~
二、CSS样式（主要是CSS3）
先说一下动画的原理：
（1）先来布局，我是将三个DIV并列排出来，如下图：
（2）把sild_top和sild_bottom的两个子级按钮置于a标签按钮的下方，用定位里面的z-index属性
（3）然后sild_top和sild_bottom的两个子级按钮进行位移到a标签按钮正下方
（4）为sild_top和sild_bottom的两个子级按钮设置动画
.both_sild_menu{ text-align: center; width: 300px;}.both_sild_menu .sild_top{ text-decoration: none; padding: 10px; background-color: #6c987e; border-radius: 10px 10px 0 0; /*让它的位置在名为both_sild_menu a的底部，且隐藏起来*/ transform: translate(0,40px); opacity: 0; /*置于底部后再让它透明度为0，不显示*/ position: relative; z-index: 1;}.both_sild_menu a{ display: block; text-decoration: none; padding: 10px; background-color: #7eedaa; position: relative; z-index: 2; /*让它的位置在顶部*/}.both_sild_menu .sild_bottom{ text-decoration: none; padding: 10px; background-color: #6c987e; border-radius: 0 0 10px 10px; /*让它的位置在名为both_sild_menu a的底部，且隐藏起来*/ opacity: 0; transform: translate(0,-40px); position: relative; z-index: 1; }.both_sild_menu .sild_top,.both_sild_menu .sild_bottom{ /*给两个DIV设置动画的属性*/ transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s;}/*名为sild_top的div动画效果设置开始*/.both_sild_menu:hover .sild_top{ /*当鼠标悬浮在框架上时，将名为sild_top的div透明度变为1*/ opacity: 1;}.both_sild_menu:hover .sild_top{ /*当鼠标悬浮在框架上时，将名为sild_top的div从初始的Y轴40px移动到Y轴0px位置*/ transform: translate(0,0); -moz-transform: translate(0,0); -o-transform: translate(0,0); -ms-transform: translate(0,0); -webkit-transform: translate(0,0);}/*名为sild_top的div动画效果设置结束*//*名为sild_bottom的div动效果设置画开始*/.both_sild_menu:hover .sild_bottom{ opacity: 1;}.both_sild_menu:hover .sild_bottom{ transform: translate(0,0); -moz-transform: translate(0,0); -o-transform: translate(0,0); -ms-transform: translate(0,0); -webkit-transform: translate(0,0);}/*名为sild_bottom的div动画效果设置结束*/原理我已经说的很清楚了，配合上面的程序应该很容易看出来吧~~~~~
Article chaud
Outils chauds Tags
Article chaud
Tags d'article chaud
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
Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?
Mar 04, 2025 pm 12:32 PM
Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Comment ajouter efficacement les effets de course aux images PNG sur les pages Web?
Mar 04, 2025 pm 02:39 PM
Comment ajouter efficacement les effets de course aux images PNG sur les pages Web?
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Quelles sont les implications de sécurité de l'utilisation des iframes et comment puis-je les atténuer?
Mar 18, 2025 pm 02:51 PM
Quelles sont les implications de sécurité de l'utilisation des iframes et comment puis-je les atténuer?
Comment utiliser le HTML5 & LT; METER & GT; élément pour afficher des données numériques dans une plage?
Mar 12, 2025 pm 04:08 PM
Comment utiliser le HTML5 & LT; METER & GT; élément pour afficher des données numériques dans une plage?
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement?
Mar 12, 2025 pm 04:05 PM
Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement?
