描述：
基于CSS的过渡效果，opacity、transition
opacity属性
不透明度
取值为：【0.0~1.0】，代表从完全透明到完全不透明（透明~不透明）
案例演示：
1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>opactity：1</title>
<style>
div{
width: 300px;
height: 300px;
background-color: red;
margin-top: 10px;
}
.oy{
opacity: 1;
}
</style>
</head>
<body>
<span><button onclick="location.reload();">刷新</button></span>
<h1>opacity的使用：1</h1>
<div>
</div>
<div class="oy">
</div>
</body>
</html>
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>opactity：2</title>
<style>
div{
width: 300px;
height: 300px;
background-color: red;
margin-top: 10px;
}
.oy{
opacity: 0.5;
}
</style>
</head>
<body>
<span><button onclick="location.reload();">刷新</button></span>
<h1>opacity的使用：2</h1>
<div>
</div>
<div class="oy">
</div>
</body>
</html>
3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>opactity：2</title>
<style>
div{
width: 300px;
height: 300px;
background-color: red;
margin-top: 10px;
}
p{
width: 300px;
height: 300px;
background-color: orange;
}
.oy{
opacity: 0;
}
</style>
</head>
<body>
<h1>opacity的使用：3</h1>
<div>
</div>
<div class="oy">
</div>
<p></p>
</body>
</html>
transition：演示1
描述：将鼠标移动到对应的图形上查看效果
1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition：1</title>
<style>
div{
width: 800px;
height: 300px;
background-color: red;
margin: 100px auto;
transition-property: background-color;
transition-duration: 3s;
/* 恒速 */
transition-timing-function: ease;
}
div:hover{
background-color: purple;
}
p{
width: 1200px;
height: 200px;
background-color: red;
opacity: 1;
transition-property: opacity;
transition-duration: 3s;
transition-timing-function: ease-in-out;
}
p:hover{
opacity: 0;
}
</style>
</head>
<body>
<h1>transition：1</h1>
<div>
</div>
<p>
</p>
</body>
</html>
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition：2</title>
<style>
ul{
width: 1200px;
height: 500px;
background-color: antiquewhite;
margin: 20px auto;
}
ul > li{
float: left;
width: 200px;
height: 200px;
background-color: palevioletred;
margin: 10px;
list-style: none;
border-radius: 0;
transition-property: border-radius;
transition-duration: 3s;
transition-timing-function: ease;
line-height: 200px;
font-size: 30px;
text-align: center;
}
/* 圆形 */
li.li_1:hover{
border-radius: 50%;
}
/* 圆角矩形 */
li.li_2:hover{
border-radius: 50px;
}
/* 对角圆角矩形 */
li.li_3:hover{
border-radius: 10% 50%;
}
/* 不规则图形 */
li.li_4:hover{
border-radius: 10% 50% 80%;
}
li.li_5:hover{
border-radius: 20% 40% 60% 80%;
}
li.li_6:hover{
border-radius: 120px 120px 30px 30px;
}
</style>
</head>
<body>
<h1>transition：2</h1>
<ul>
<li class="li_1">1</li>
<li class="li_2">2</li>
<li class="li_3">3</li>
<li class="li_4">4</li>
<li class="li_5">5</li>
<li class="li_6">6</li>
</ul>
</body>
</html>
说明：
