HTML的特效
源码*<!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>
这个是
成品链接: https://pan.baidu.com/s/1eKo3Szs-1-S-IzeuiZxKHw 密码: istn 善用论坛的代码高亮展示功能
小白路过，冒个泡，顶个贴
小白路过，冒个泡，顶个贴 看了下，还挺好看 本帖最后由 xtuuqtbl 于 2018-6-12 16:58 编辑
没看出什么 楼主666.这前端技术已经炉火纯青啦 厉害 纯html+css emmmm 感觉没什么特效啊
页:
[1]
2