css下拉菜单、过渡

 1 <h2>鼠标移动后出现下拉菜单</h2>
 2 <p>将鼠标移动到指定元素上就能看到下拉菜单。</p>
 3 
 4 <div class="dropdown">
 5   <span>鼠标移动到我这！</span>
 6   <div class="dropdown-content">
 7     <p>菜鸟教程</p>
 8     <p>www.runoob.com</p>
 9   </div>
10 </div>

 

 1 <style>
 2     .dropdown{
 3    position:relative;
 4    display:inline-block; 
 5 }
 6     .dropdown-content{
 7        display:none;
 8         position:absolute；
 9          background-color：#9f9f9;
10         min-width:160px；/*设置段落的最小宽度*/
11         box-shadow：0px 8px 16px 0px rgba(0,0,0,0.2);
12         padding:12px 16px；
13 }
14     dropdown：hover .dropdown-content{
15     display:block;
16     }
17 </style>    

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">菜鸟教程 1</a>
    <a href="#">菜鸟教程 2</a>
    <a href="#">菜鸟教程 3</a>
  </div>
</div>

<style>
/* 下拉按钮样式 */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* 容器 <div> - 需要定位下拉内容 */
.dropdown {
    position: relative;
    display: inline-block;
}

/* 下拉内容 (默认隐藏) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* 下拉菜单的链接 */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}

/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
    display: block;
}

/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>

动画

<p><b>注意：</b>该实例无法在IE9及更早IE版本上工作</p>
<div></div>
<p>鼠标移动到div元素上，查看过度效果</p>

div{
width:100px;
height:100px;
background:red;
tramsition:width 2s;
-webkit-transition:width 2s;/*safari*/
}
div:hover{
width:300px;
}

多项改变：

<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

<div>鼠标移动到 div 元素上，查看过渡效果。</div>

div{
width:100px;
height:100px;
background:red;
-webkit-transition:width 2s,height 2s,-webkit-transform 2s
}/* For Safari 3.1 to 6.0 */
div:hover{
width:200px;
height:200px;
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}

 

转载于:https://www.cnblogs.com/chenyang-1/p/8298849.html