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);
CSS中的過度效果