黑马肉多多商城页面demo鼠标悬浮效果代码_最新多肉植物商城代码-CSDN博客

本文链接：https://blog.csdn.net/m0_56691541/article/details/115390503

<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;
}