项目3-2-----多肉

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="css/succulent.css"><title>多肉商城</title>
</head>
<body><header><img src="data:images/head.jpg"></header><div class="border-radius">最新肉肉</div><div class="main"><div class="view"><img src="data:images/1.jpg" alt=""><div class="hover"><h3>多肉仙人掌</h3><p>多肉植物防辐射 肉肉植物花卉绿植盆栽</p></div></div><div class="view"><img src="data:images/7.jpg" alt=""><div class="hover"><h3>创意组合</h3><p>多肉组合盆栽净化空气办公桌礼物套餐</p></div></div><div class="view"><img src="data:images/3.jpg" alt=""><div class="hover"><h3>创意组合</h3><p>多肉组合盆栽净化空气办公桌礼物套餐</p></div></div><div class="view"><img src="data:images/4.jpg" alt=""><div class="hover"><h3>创意组合</h3><p>多肉组合盆栽净化空气办公桌礼物套餐</p></div></div><div class="view"><img src="data:images/5.jpg" alt=""><div class="hover"><h3>创意组合</h3><p>多肉组合盆栽净化空气办公桌礼物套餐</p></div></div><div class="view"><img src="data:images/6.jpg" alt=""><div class="hover"><h3>创意组合</h3><p>多肉组合盆栽净化空气办公桌礼物套餐</p></div></div><div class="view"><img src="data:images/2.jpg" alt=""><div class="hover"><h3>多肉仙人掌</h3><p>多肉植物防辐射 肉肉植物花卉绿植盆栽</p></div></div><div class="view"><img src="data:images/8.jpg" alt=""><div class="hover"><h3>创意组合</h3><p>多肉组合盆栽净化空气办公桌礼物套餐</p></div></div></div><section><p>多肉植物是指植物营养器官肥大的高等植物，通常具根、茎、叶三种营养器官和花（Flower ['flauə]）、果实、种子三种繁殖器官。在园艺上，又称肉质植物或多肉花卉，但以多肉植物这个名称最为常用。全世界共有多肉植物一万余种，它们绝大部分属于高等植物（绝大多数是被子植物）。在植物分类上隶属几十个科，个别专家认为有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;/*四个边框圆角半径都是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;}

项目3-2-----多肉相关推荐

python枪战项目计划书_人肉(共享)代购项目计划书(示例代码)
人肉(共享)代购项目计划书寻志同道合人士,共谋发展, 微信号: hummels_whu 项目背景: 1.国人出国旅游.出差的几率大大增加,有较大潜在人数可以作为代购货运服务的提供方.类似于私家车车主 ...
从一个多项目Web工程看Eclipse如何导入Gradle项目
##概述上一节,我们说了Eclipse如何安装Gradle的插件,以达到对Gradle的支持. 这里再次说一下为什么我们需要熟悉Gradle构建工具,主要原因就是很多开源项目现在都在改用Gradle ...
书评 | 如何让开发中的各种文档变活？《活文档》阅读总结
题图 | © Yunshan Xia 几年前在 O'Reilly 看到一本叫 Living Documentation 的书,可惜当时没读完. 最近图灵出版了该书的中文翻译版<活文档:与代码共同 ...
疯狂Spring Cloud微服务架构实战
网站更多书籍点击进入>> CiCi岛下载电子版仅供预览及学习交流使用,下载后请24小时内删除,支持正版,喜欢的请购买正版书籍电子书下载(皮皮云盘-点击"普通下载" ...
公有云和私有云的对比和转换
章节目录共5500字,可跳读趣味科普-虾蟹互换私有云同样有底蕴有深度私有云转公有云的真难点公有云转私有云的真难点私有云转公有云的假难题公有云转私有云的假难题两类云人力侧重的不同定制 ...
区块链社区：区块链从业者知音社区，分享社区精准流量粉丝资源
来拓客社区的起步定位,直指高维度的[连接区块链从业者],就是要告诉大家,我们不止是在做社区培训,我们还是在搭建生态.来拓客秉持一如既往不画饼只求实的做事风格,在区块链领域深入研究多年,集项目.品牌.流 ...
IT痴汉的工作现状44-外包困局
写在猴年大年初一,祝大家新年快乐,像美猴王一样神通广大,克服一切困难. 伟仔有过三年做外包软件的经历,深知其中酸楚.前几天和原来同事聚会,谈起当前的外包形式,心中不胜唏嘘. 真希望,我们能够有大圣的神 ...
职场人的路子该怎么走？有一种折腾叫无悔
跟着导航不迷路啰哩啰嗦在前面我的入学季我的毕业季初入职场那两年转行过程一路辛酸开启全新职场征途总结送给小伙伴啰哩啰嗦在前面马上快中秋了,时间真快,毕业季的余温还未散去,又一年入学季即 ...
3.2 项目（多肉）
最新肉肉多肉仙人掌多肉植物防辐射肉肉植物花卉绿植盆栽创意组合多肉组合盆栽净化空气办公桌礼物套餐创意组合多肉组合盆栽净化空气办公桌礼物套餐创意组合多肉组合盆栽净化空气办公桌礼物套餐创 ...

项目3-2-----多肉

项目3-2-----多肉相关推荐

最新文章

热门文章