| *<!doctype html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>无标题文档</title> |
| <style type="text/css"> |
| *{ margin:0; padding:0;} |
| .header{text-align:center; height:450px; margin-top:20px;} |
| .border-redius{width:200px; height:50px; margin:30px auto; background-color:#099; border:4px solid #FFF; border-radius:40px; font-size:24px; line-height:24px; text-align:center; padding-top:15px; color:#FFF;} |
| .border-redius:hover{box-shadow:0 0 30px rgba(0,0,0,0.3);} |
| .main{width:880px;border:1px solid #333; height:440px; margin:0 auto;} |
| .view{width:200px; height:200px; margin:10px; float:left; position:relative; overflow:hidden;} |
| .hover{ position:absolute;width:200px; height:0px; overflow:hidden;background: rgba(0,0,0,0.5); top:40px;left:0; text-align:center; color:#FFF; transform:rotate(55deg); transition:all 0.5s; z-index:4000;} |
| .view:hover .hover{ transform:rotate(0deg);-webkit-transform:rotate(0deg); height:120px;} |
| .view:before{ content:"";position:absolute;top:-240px; right:0; width:350px; height:350px; background:rgba(133,200,190,0.5); transform:rotate(55edg) 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:0px;} |
| .view:after{content:"";position:absolute;bottom:-240px;left:0px; width:350px; height:350px; background:rgba(133,200,190,0.5);transform:rotate(55edg) 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;} |
| </style> |
| </head> |
| |
| <body> |
| <header class="header"> |
| <img src="5-4图片素材/head.jpg"/></header> |
| <div class="border-redius">最新肉肉</div> |
| <div class="main"> |
| <div class="view"><img src="5-4图片素材/1.jpg"/><div class="hover"><h3>多肉仙人掌</h3><p>多肉植物防辐射肉肉植物花卉绿植物盆栽</p></div></div> |
| <div class="view"><img src="5-4图片素材/2.jpg"/><div class="hover"><h3>多肉仙人掌</h3><p>多肉植物防辐射肉肉植物花卉绿植物盆栽</p></div></div> |
| <div class="view"><img src="5-4图片素材/3.jpg"/><div class="hover"><h3>多肉仙人掌</h3><p>多肉植物防辐射肉肉植物花卉绿植物盆栽</p></div></div> |
| <div class="view"><img src="5-4图片素材/4.jpg"/><div class="hover"><h3>多肉仙人掌</h3><p>多肉植物防辐射肉肉植物花卉绿植物盆栽</p></div></div> |
| <div class="view"><img src="5-4图片素材/5.jpg"/><div class="hover"><h3>多肉仙人掌</h3><p>多肉植物防辐射肉肉植物花卉绿植物盆栽</p></div></div> |
| <div class="view"><img src="5-4图片素材/6.jpg"/><div class="hover"><h3>多肉仙人掌</h3><p>多肉植物防辐射肉肉植物花卉绿植物盆栽</p></div></div> |
| <div class="view"><img src="5-4图片素材/7.jpg"/><div class="hover"><h3>多肉仙人掌</h3><p>多肉植物防辐射肉肉植物花卉绿植物盆栽</p></div></div> |
| <div class="view"><img src="5-4图片素材/8.jpg"/><div class="hover"><h3>多肉仙人掌</h3><p>多肉植物防辐射肉肉植物花卉绿植物盆栽</p></div></div> |
| </div> |
| </body> |
| </html> |
| 这个是 |
发表于 2018-6-12 12:54
发表于 2018-6-12 14:05
