首页 > 分享 > 项目3

项目3

最新推荐文章于 2022-11-20 18:00:38 发布

全栈的魅力 于 2020-04-04 13:46:00 发布

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

<!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="images/head.jpg"> </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>多肉植物是指植物营养器官肥大的高等植物,通常具根、茎、叶三种营养器官和花(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; }

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220

相关知识

总投资约1.7亿元环境绿化美化项目(更新3)
【项目3
附件3
软件项目管理——项目采购管理
土壤改良剂项目建议书
园林植物景观设计 花卉景观设计 项目3 园林植物构成要素设计(花卉
项目一
广西:辅助生殖项目进医保1年来为生育困难人群减负逾3亿元
项目分享
兰花交易市场项目

网址: 项目3 https://m.huajiangbk.com/newsview843611.html

所属分类:花卉
上一篇: @花城市深圳多肉大棚 的个人主页
下一篇: 【转】万象,玉扇,玉露,卧牛,寿