HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.container-1 div:first-child{
background: radial-gradient(circle,#55aaff 1% , #4245ff);
text-align: center;
padding: 7px;
font-size: 19px;
box-shadow: 0 1px 3px -1px rgba(0,0,0,0.12),0 2px 6px rgba(0,0,0,0.07);
color: white;
border-top-right-radius:10px;
border-top-left-radius:10px;
font-weight: 600;
margin-bottom: 0;
margin-top: 2px;
box-shadow: 0 1px 3px -1px rgba(0,0,0,0.12),0 2px 6px rgba(0,0,0,0.07);
}
.container-1 div:nth-child(3){
background-color: #f1f1f1;
box-shadow: 0 1px 3px -1px rgba(0,0,0,0.12),0 2px 6px rgba(0,0,0,0.07);
margin:0 auto 1em auto;
font-size: 14px;
border-bottom-right-radius:8px;
border-bottom-left-radius:8px;
border: 1px solid rgba(0,0,0,0.07);
padding: 8px 8px 0px 8px;
}
.container-1 p.linkrb{
text-align: right;
}
.container-1 div:nth-child(2){
margin: 0 auto 0 0;
background-color: #1f5b85;
padding: 3px;
transition-property: all; transition-duration: .7s;transition-timing-function: cubic-bezier(0.72, 0.01, 0.2, 1);
max-width: 100px;
overflow: hidden;
}
div.container-1:hover :nth-child(2){
max-width: 1950px;
}
</style>
<title></title>
</head>
<body>
<div class="container-1">
<div><!--标题-->哦上帝啊</div>
<div></div>
<div><!--主体内容-->233
<p class="linkrb"><a href="#" style="text-decoration:none;">查看更多......</p></div>
</div>
</body>
</html>
