<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/succulent.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多肉植物商城</title>
</head>
<body>
<header>
<img src="images/head.jpg" alt="">
</header>
<div class="border-radius">最新肉肉</div>
<div class="main">
<div class="view">
<img src="images/1.jpg" alt="">
<div class="hover">
<h3>肉多仙人掌</h3>
<p>多肉植物防辐射 肉肉植物花卉绿植盆栽</p>
</div>
</div>
<div class="view">
<img src="images/7.jpg" alt="">
<div class="hover">
<h3>创意组合</h3>
<p>多肉组合盆栽净化空气办公桌礼物套餐</p>
</div>
</div>
<div class="view">
<img src="images/3.jpg" alt="">
<div class="hover">
<h3>创意组合</h3>
<p>多肉组合盆栽净化空气办公桌礼物套餐</p>
</div>
</div>
<div class="view">
<img src="images/4.jpg" alt="">
<div class="hover">
<h3>创意组合</h3>
<p>多肉组合盆栽净化空气办公桌礼物套餐</p>
</div>
</div>
<div class="view">
<img src="images/5.jpg" alt="">
<div class="hover">
<h3>创意组合</h3>
<p>多肉组合盆栽净化空气办公桌礼物套餐</p>
</div>
</div>
<div class="view">
<img src="images/6.jpg" alt="">
<div class="hover">
<h3>创意组合</h3>
<p>多肉组合盆栽净化空气办公桌礼物套餐</p>
</div>
</div>
<div class="view">
<img src="images/2.jpg" alt="">
<div class="hover">
<h3>肉多仙人掌</h3>
<p>多肉植物防辐射 肉肉植物花卉绿植盆栽</p>
</div>
</div>
<div class="view">
<img src="images/8.jpg" alt="">
<div class="hover">
<h3>创意组合</h3>
<p>多肉组合盆栽净化空气办公桌礼物套餐</p>
</div>
</div>
</div>
<section>
<p>多肉植物是指植物营养器官肥大的高等植物,通常具有根,经,叶3种营养器官和花,果实,种子3种器官;在园艺上,又称肉质植物或多肉花卉,但以多肉植物这个名称最为常用。全世界共有一万余种植物,他们绝大部分属于高等植物,在植物隶属几十个科,个别专家认为有67个科中含有多肉植物,但是部分专家认为只有50余科。</p>
</section>
<footer>
<p>偏安一偶 静静生活</p>
<div class="services">品质保障丨七天无理由退换丨特色服务体验</div>
</footer>
</body>
</html>
```css
body{
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
header{
text-align: center;
height: 450px;
margin-top: 20px;
}
section{
width: 880px;
margin: 0 auto;
background-color: #AAE6DA;
}
section>p{
font-family: 'STXingkai';
font-size: 18px;
color: #fff;
line-height: 30px;
padding: 20px;
text-indent: 2em;
}
footer{
width: 880px;
margin: 0 auto;
}
footer>p{
font-family:'STXingkai' ;
font-size: 35px;
color: #AAE6DA;
line-height: 20px;
padding: 20px;
text-align: center;
}
.services{
font-family: 'Microsoft Yahei';
font-size: 15px;
color: #374136;
padding-bottom: 50px;
text-align: center;
}
.border-radius{
width: 200px;
height: 50px;
margin: 35px auto;
background-color: #AAE6DA;
border: 5px solid #fff;
border-radius: 50px;
font-family:'Microsoft Yahei';
font-size: 25px;
color: #fff;
line-height: 50px;
text-align: center;
}
.border-radius:hover{
top: -5px;
box-shadow: 0 0 15px #AAA;
}
.main{
width: 880px;
border: 1px solid #ccc;
height: 440px;
margin: 0 auto;
}
.view{
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
margin: 10px;
float: left;
}
.hover{
width: 200px;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 40px;
left: 0;
text-align: center;
color: #fff;
transform: rotate(55deg);
-webkit-transform: rotate(55deg);
transition: all 0.5s;
-webkit-transition: all 0.5s;
overflow: hidden;
height: 0;
z-index: 4000;
}
.hover h3{
color: #fff;
border-bottom: 2px solid rgba(76, 179, 77, 0.5);
padding-bottom: 10px;
}
.view:hover .hover{
height: 120px;
transform: rotate(0deg) ;
-webkit-transform: rotate(0deg);
}
.view:before{
content: "";
position: absolute;
top: -240px;
right: 0;
width: 360px;
height: 360px;
background: rgba(133 , 203, 190, 0.5);
transform:rotate(55deg) translateX(60px) ;
-webkit-transform: rotate(55deg) translateX(60px);
transform-origin: 100% 0%;
-webkit-transform-origin: 100% 0%;
transition: all 0.5s ease 0.3s;
-webkit-transition: all 0.5s ease 0.3s;
}
.view:hover:before{
top: 0;
}
.view:after{
content: "";
position: absolute;
bottom: -240px;
left: 0;
width: 360px;
height: 360px;
background: rgba(133, 203, 190, 0.5);
transform:rotate(55deg) translateX(-60px) ;
-webkit-transform: rotate(55deg) translateX(-60px);
transform-origin: 0% 100%;
-webkit-transform-origin: 0% 100%;
transition: all 0.5s ease 0.3s;
-webkit-transition: all 0.5s ease 0.3s;
}
.view:hover:after{
bottom: 0px;
}