CSS中的过度效果

1.hover时图片变清晰

html:
<div class="box11">
???<div></div>
</div>
CSS:
.box11{
???clear: both;
???width: 229px;
???height: 129px;
???background: url("dm_pic01.jpg");
}

.box11>div{
???width: 229px;
???height: 129px;
???background-color: rgba(232, 232, 232, 0.5);

}

.box11>div:hover{
???background-color: rgba(232, 232, 232, 0);
}
1.hover出现下拉列表

html:

<ul>
???<li><a href="#">marvel01</a></li>
???<li><a href="#">marvel02</a></li>
???<li>
???????<a href="#">marvel03</a>
???????<ul>
???????????<li>刘国忠01</li>
???????????<li>刘国忠02</li>
???????????<li>刘国忠03</li>
???????</ul>
???</li>
</ul>

css:
li{
???float: left;
???list-style-type: none;
???margin-right: 30px;
}

a{
???text-decoration: none;
???color: black;
}

ul ul>li{
???float: none;
???margin-right: 0px;
???display: none;没有显示

}

ul{
???padding: 0;
}

ul>li:nth-child(3){
???transition: all 3s;

}

ul>li:nth-child(3):hover li{
???display: block;显示
???
}

3.hover时，字体放大不出现占位的情况

在li上设置width宽度，margin去掉，
eg：

4、下拉列表的实现并且下拉列表出现180度的旋转，并且带有顺序时间的旋转
html:

<div class="box">
<ul>
<li><a href="#">01</a></li>
<li><a href="#">01</a></li>
<li><a href="#">01</a>
?<ol>
?<li><a href="#">01</a></li>
?<li><a href="#">01</a></li>
?<li><a href="#">01</a>
?</ol>

</li>
</ul>
</div>

CSS:
.box{
???width: 500px; 包含内容的块
???height: 200px;
???border: 1px solid black;
}
li{
???list-style: none;

}
ul li a{
???text-decoration: none;
???color: black;
}
ul >li{
????float: left;

}
ul ol{
???padding: 0px;防止下拉列表和上面的li内容对不齐
???margin: 0px;
}
ol> li{ ?将下拉列表的设置
???opacity: 0;不显示
???transition: all 2s;时间2秒
???transform: rotatey(180deg);旋转180度
???background: bisque;背景色，一般透明色
???background: rgba(93, 93, 93, 1);透明色
????border-radius: 20%;设置背景的角度
}
ul>li:last-child:hover li:nth-child(1){
???opacity: 1;当hover时，显示
???transform: none;不让其旋转
???transition-delay: 0s;设置为0秒
}
ul>li:last-child:hover li:nth-child(2){
????opacity: 1;
????transform: none;
????transition-delay: 200ms;
}

ul>li:last-child:hover li:nth-child(1){
????opacity: 1;
????transform: none;
????transition-delay: 300ms;
}
4.li下面的出现下划线设置

html:
<ul class="box4">
???<li>nihao1</li>
???<li>nihao2</li>
???<li>nihao3</li>
</ul>

css:
ul >li{
????float: left;
???margin-left: 50px;
???height: 20px;
???text-align: center;字体居中
???width: 200px;
???position: relative;
}

.box li:before{下划线
???content: "";
???border: 2px solid; 边框
????width:0;
???/*width: 100%;*/没有hover时宽度显示根据li的宽度显示
???position: absolute;对下划线定位
???bottom: 0;定位到li底部
???left: 80%;可以是数字，代表点的位置移动
???right: 60px;
???
???transition: all linear 0.5s;

二：li下面的出现下划线动画（从中间向两边展开）

???content: "";
???bottom: 0;
???border: 2px solid;
???width: 0;
???position: absolute;
???left: 50%;要实现两边展开必须是50%，是li的一半
???transition: all linear 0.5s;

}
.box li:hover:before{
????width:100%; ?如果设置其他值50时，是一半的效果
????/*left: 0;*/
????right: 60px; ?设置动画时右边的显示长度
}

注：上边两边的：right: 60px; ??right: 60px; 是向右边展开，都是这是left则是向左边展开

5.图片：设置图片hover时的背景，渐变色

figcaption{
????/*clear: both;*/
????float: left;
????position: relative;
????width: 300px;背景透明色的宽
????height:250px;背景透明色的高
????top: -215px;
????right: -6px;
????color: transparent; 设置颜色为完全透明（不显示时用）
???/*display: none;*/

}
figure:hover figcaption{
???color:black;
?/*opacity: 1;*/
???background: rgba(245, 17, 12, 0.3);背景透明色

}

5:四个角变椭圆形：导航：

border-radius: 100px 100px 100px 100px;
阴影效果：
box-shadow: 0px 0px 10px 5px rgba(255,0,0,.6);