多肉商店的web

最新推荐文章于 2023-02-01 13:33:42 发布

knowledge...

最新推荐文章于 2023-02-01 13:33:42 发布

阅读量2k

点赞数 7

分类专栏： java web

本文链接：https://blog.csdn.net/weixin_45807622/article/details/108553751

版权

java web 专栏收录该内容

26 篇文章

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/succulent.css" />
		<title>多肉商城</title>
	</head>

	<body>
		<!--广告栏-->
		<header>
			<img src="img/head.jpg">
		</header>
		<!--主題区域-->
		<div class="border-radius">最新肉肉</div>
		<div class="main">
			<div class="view">
            <img src="img/1.jpg" alt="">
            <div class="hover">
                <h3>多肉仙人掌</h3>
                <p>多肉植物防辐射 肉肉植物花卉绿植盆栽</p>
            </div>
        </div>
        <div class="view">
            <img src="img/7.jpg" alt="">
            <div class="hover">
                <h3>创意组合</h3>
                <p>多肉组合盆栽净化空气办公桌礼物套餐</p>
            </div>
        </div>
        <div class="view">
            <img src="img/3.jpg" alt="">
            <div class="hover">
                <h3>创意组合</h3>
                <p>多肉组合盆栽净化空气办公桌礼物套餐</p>
            </div>
        </div>
        <div class="view">
            <img src="img/4.jpg" alt="">
            <div class="hover">
                <h3>创意组合</h3>
                <p>多肉组合盆栽净化空气办公桌礼物套餐</p>
            </div>
        </div>
		</div>
		<div class="myp">
			<p>多肉植物是指植物营养器官肥大的高等植物，通常具根、茎、叶三种营养器官和花（Flower ['flau?]）、果实、种子三种繁殖器官。在园艺上，又称肉质植物或多肉花卉，但以多肉植物这个名称最为常用。全世界共有多肉植物一万余种，它们绝大部分属于高等植物（绝大多数是被子植物）。在植物分类上隶属几十个科，个别专家认为有67个科中含有多肉植物，但大多数专家认为只有50余科。
			</p>
		</div>
		<!--底部区域-->
		<footer>
			<p>偏安一偶 静静生活</p>
			<div class="services">品质保障|七天无理由退换货|特色服务体验 </div>
		</footer>
	</body>
</html>

css样式
/*第3单元  项目3-2 多肉书城*/
    body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }
    header {
        text-align: center;
        height: 450px;
        margin-top: 20px;
    }
    .myp {
        width: 880px;
        margin: 0 auto;
        background-color: #AAE6DA;
    }
    .myp>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;/*四个边框圆角半径都是50px*/
            font-family: 'Microsoft Yahei';
            font-size:25px;
            color: #fff;
            line-height:50px;
            text-align: center;
    }
    /*当鼠标悬停在该元素时，绝对定位在父元素顶部-5px，以及给该元素加盒阴影*/
    .border-radius:hover {
            top: -5px;
            box-shadow: 0 0 15px #AAA;/*模糊值为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);/*变形：旋转55度*/
            -webkit-transform: rotate(55deg);
            transition: all 0.5s;/*过渡：所有属性都改变，时长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);
        }
        /*before   after为选择器，一般给选择器加动画背景，设置动画样式*/
        .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);/*变形：旋转55度，水平（向右）移动60px*/
            -webkit-transform: rotate(55deg) translateX(60px);
            transform-origin: 100% 0%;/*设置元素变形起始点*/
            -webkit-transform-origin: 100% 0%;
            transition: all 0.5s ease 0.3s;/*过渡动画：所有属性都改变，时长0.5s,速率逐渐变慢，延迟0.3s*/
            -webkit-transition: all 0.5s ease 0.3s;
        }
        /*写好样式，进行隐藏，用top:-240px;*/
        .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;
        }

实现效果：
在这里插入图片描述