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);