想知道那个井子框怎么写哦！！！太笨了 没反应过来
想知道那个井子框怎么写哦！！！太笨了 没反应过来
3 回答
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="root">
<div class="img">
</div>
<div class="line-h"></div>
<div class="line-v"></div>
</div>
</body>
<style>
*{
padding: 0;
margin: 0;
}
.root{
width: 300px;
height: 300px;
background: rgba(255,0,0,.3);
position: relative;
}
.line-h,.line-v{
position: absolute;
width: 200px;
height: 200px;
left: 50px;
top: 50px;
transition: all .4s linear;
opacity: 0;
}
.line-h{
transform: scaleX(0);
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.line-v{
transform: scaleY(0);
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.root:hover .line-h{
opacity: 1;
transform: scaleX(1.2);
}
.root:hover .line-v{
opacity: 1;
transform: scaleY(1.2);
}
</style>
</html>
.test7{
background: #008000;
}
.test7 figcaption{
width: 100%;
height: 100%;
}
.test7 figcaption div.one{
width: 70%;
height: 90%;
border-right: 2px solid #FFFFFF;
border-left: 2px solid #FFFFFF;
position: absolute;
top: 5%;
left: 10%;
opacity: 0;
transform: scale(0,1);
}
.test7 figcaption div.two{
width: 80%;
height: 70%;
border-top: 2px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF;
position: absolute;
top: 15%;
left:5%;
opacity: 0;
transform: scale(0,1);
}
.test7 figcaption h2{
position: absolute;
top: 20%;
left:15%;
opacity: 0;
transform: scale(0.5,0.5);
}
.test7 figcaption p{
position: absolute;
top: 40%;
left: 15%;
opacity: 0;
transform: scale(0.5,0.5);
}
.test7 img{
transform: scale(1.1,1.1);
opacity: 1;
}
.test7:hover figcaption div.one{
transform: scale(1,-1);
opacity: 1;
transition-delay: 0.1s;
}
.test7:hover figcaption div.two{
transform: scale(1,-1);
opacity: 1;
transition-delay: 0.15s;
}
.test7:hover figcaption h2{
transform: scale(1,1);
opacity: 1;
transition-delay: 0.2s;
}
.test7:hover figcaption p{
transform: scale(1,1);
opacity: 1;
transition-delay: 0.3s;
}
.test7:hover img{
transform: scale(1,1);
opacity: 0.5;
}<figure class="test7"> <img src="img/ti899.jpg"> <figcaption> <h2>图片标题</h2> <p>线性动画</p> <div class="one"></div> <div class="two"></div> </figcaption> </figure>
经过测试没啥问题，分享下
举报
0/150
提交
取消
