css动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
ul li{
list-style: none;
font-size: 16px;
line-height: 20px;
color: #cccccc;
font-family: 楷体;
float: left;
padding: 5px 20px;
}
ul li:hover{
color: #ff2e44;
border-bottom: 2px solid #00BDEF;
font-size: 20px;
transition: 0.5s;
}
ul li:before{
content: "❤";
}
.box1{
min-height: 300px;
clear: both;
text-align: center;
position: relative;
top: 40px;
left: 30%;
}
.box1 table{
border: 1px solid #cccccc;
}
.box1 table tr th{
background-color: #cccccc;
}
.box1 table tr td{
border-bottom: 0.5px solid #cccccc;
}
.box2{
width: 448px;
min-height: 300px;
clear: both;
text-align: center;
margin: 10px auto;
}
.box2 img{
border-radius: 10px;
}
.course{
border-radius: 10px;
position: relative;
box-shadow: 5px 5px 2px #cccccc ;
}
.message{
width: 448px;
height: 90px;
position: absolute;
top: 55%;
border-radius: 10px;
background-color: #ffffff;
}
.message:hover{
transform:translateY(-30%);
height: 130px;
transition: 0.5s;
}
</style>
</head>
<body>
<ul>
<li>我的特权</li>
<li>我的学习计划</li>
<li>我的作业</li>
<li>我的辅导</li>
<li>我的回访</li>
<li>短信提醒</li>
</ul>
<div>
<table cellpadding="20" cellspacing="0">
<tr>
<th>会员名称</th>
<th>套餐名称</th>
<th>开通时间</th>
<th>结束时间</th>
<th>状态</th>
</tr>
<tr>
<td>赞助会员</td>
<td>Web前端开发基础与实战</td>
<td>2019-01-11 11:48:00</td>
<td>2019-05-13 11:48:00</td>
<td>正常</td>
</tr>
<tr>
<td>赞助会员</td>
<td>Web前端开发基础与实战</td>
<td>2019-01-11 11:48:00</td>
<td>2019-05-13 11:48:00</td>
<td>正常</td>
</tr>
<tr>
<td>赞助会员</td>
<td>Web前端开发基础与实战</td>
<td>2019-01-11 11:48:00</td>
<td>2019-05-13 11:48:00</td>
<td>正常</td>
</tr>
</table>
</div>
<div>
<div>
<img src="http://img.php.cn/upload/course/000/000/012/5b5fd7e995aca877.png" alt="">
</div>
<div>
<h3>Web开发基础_HTML+CSS</h3>
<span style="float:left">共17节</span>
<span style="float:right">学习进度：88%</span>
</div>
</div>
</body>
</html>
