用蒙版做特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
border: 12px solid rgb(68, 22, 22);
position: relative;
overflow: hidden;
margin:0 auto;
}
.ggg img{
transition: all 0.2s linear;
animation: img 0.2s linear infinite;
}
@keyframes img{
from{
transform: scale(1.2,1.2) ;
}
to{
transform: scale(0.5,0.5) ;
}
}
.pic{
width: 150px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
bottom: 0;
transition: all 5s linear;
}
.pfc{
width: 300px;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
transition: all 5s linear;
}
.ppc{
width: 300px;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
transition: all 5s linear;
}
.poc{
width: 150px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
right: 0;
bottom: 0;
transition: all 5s linear;
}
.box:hover .pic{
left: -150px;
}
.box:hover .poc{
right: -150px;
}
.box:hover .ppc{
top: -150px;
}
.box:hover .pfc{
bottom: -150px;
}
.a{
width: 150px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
bottom: 0;
transition: all 4s linear;
}
.b{
width: 300px;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
transition: all 4s linear;
}
.c{
width: 300px;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
transition: all 4s linear;
}
.d{
width: 150px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
right: 0;
bottom: 0;
transition: all 4s linear;
}
.box:hover .a{
left: -150px;
}
.box:hover .d{
right: -150px;
}
.box:hover .c{
top: -150px;
}
.box:hover .b{
bottom: -150px;
}
.aab{
width: 150px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
bottom: 0;
transition: all 3s linear;
}
.b{
width: 300px;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
transition: all 3s linear;
}
.cc{
width: 300px;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
transition: all 3s linear;
}
.dd{
width: 150px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
right: 0;
bottom: 0;
transition: all 3s linear;
}
.box:hover .aa{
left: -150px;
}
.box:hover .dd{
right: -150px;
}
.box:hover .cc{
top: -150px;
}
.box:hover .bb{
bottom: -150px;
}
.aaa{
width: 150px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
bottom: 0;
transition: all 2s linear;
}
.bbb{
width: 300px;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
transition: all 2s linear;
}
.ccc{
width: 300px;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
transition: all 2s linear;
}
.ddd{
width: 150px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
right: 0;
bottom: 0;
transition: all 2s linear;
}
.box:hover .aaa{
left: -150px;
}
.box:hover .ddd{
right: -150px;
}
.box:hover .ccc{
top: -150px;
}
.box:hover .bbb{
bottom: -150px;
}
.aaaa{
width: 150px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
bottom: 0;
transition: all 1s linear;
}
.bbbb{
width: 300px;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
transition: all 1s linear;
}
.cccc{
width: 300px;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
transition: all 1s linear;
}
.dddd{
width: 150px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
right: 0;
bottom: 0;
transition: all 1s linear;
}
.box:hover .aaaa{
left: -150px;
}
.box:hover .dddd{
right: -150px;
}
.box:hover .cccc{
top: -150px;
}
.box:hover .bbbb{
bottom: -150px;
}
/* 22222 */
.box1{
width: 300px;
height: 300px;
border: 12px solid rgb(68, 22, 22);
position: relative;
overflow: hidden;
}
.ggg1 img{
transition: all 0.2s linear;
animation: img 0.2s linear infinite;
}
@keyframes img{
from{
transform: scale(1.2,1.2) ;
}
to{
transform: scale(0.5,0.5) ;
}
}
.pic1{
width: 150px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
bottom: 0;
transition: all 5s linear;
}
.pfc1{
width: 300px;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
transition: all 5s linear;
}
.ppc1{
width: 300px;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
transition: all 5s linear;
}
.poc1{
width: 150px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
right: 0;
bottom: 0;
transition: all 5s linear;
}
.box:hover .pic1{
left: -150px;
}
.box:hover .poc1{
right: -150px;
}
.box:hover .ppc1{
top: -150px;
}
.box:hover .pfc1{
bottom: -150px;
}
.a1{
width: 150px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
bottom: 0;
transition: all 4s linear;
}
.b1{
width: 300px;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
transition: all 4s linear;
}
.c1{
width: 300px;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
transition: all 4s linear;
}
.d1{
width: 150px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
right: 0;
bottom: 0;
transition: all 4s linear;
}
.box:hover .a1{
left: -150px;
}
.box:hover .d1{
right: -150px;
}
.box:hover .c1{
top: -150px;
}
.box:hover .b1{
bottom: -150px;
}
.aab1{
width: 150px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
bottom: 0;
transition: all 3s linear;
}
.bb1{
width: 300px;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
transition: all 3s linear;
}
.cc1{
width: 300px;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
transition: all 3s linear;
}
.dd1{
width: 150px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
right: 0;
bottom: 0;
transition: all 3s linear;
}
.box:hover .aa1{
left: -150px;
}
.box:hover .dd1{
right: -150px;
}
.box:hover .cc1{
top: -150px;
}
.box:hover .bb1{
bottom: -150px;
}
.aaa1{
width: 150px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
bottom: 0;
transition: all 2s linear;
}
.bbb1{
width: 300px;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
transition: all 2s linear;
}
.ccc1{
width: 300px;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
transition: all 2s linear;
}
.ddd1{
width: 150px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
right: 0;
bottom: 0;
transition: all 2s linear;
}
.box:hover .aaa1{
left: -150px;
}
.box:hover .ddd1{
right: -150px;
}
.box:hover .ccc1{
top: -150px;
}
.box:hover .bbb1{
bottom: -150px;
}
.aaaa1{
width: 150px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
bottom: 0;
transition: all 1s linear;
}
.bbbb1{
width: 300px;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
transition: all 1s linear;
}
.cccc1{
width: 300px;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
transition: all 1s linear;
}
.dddd1{
width: 150px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
right: 0;
bottom: 0;
transition: all 1s linear;
}
.box:hover .aaaa1{
left: -150px;
}
.box:hover .dddd1{
right: -150px;
}
.box:hover .cccc1{
top: -150px;
}
.box:hover .bbbb1{
bottom: -150px;
}
</style>
</head>
<body>
<div class="box">
<div class="ggg"> <img src="342354.jpg" ></div>
<div class="pic"></div>
<div class="poc"></div>
<div class="pfc"></div>
<div class="ppc"></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="aa"></div>
<div class="bb"></div>
<div class="cc"></div>
<div class="dd"></div>
<div class="aaa"></div>
<div class="bbb"></div>
<div class="ccc"></div>
<div class="ddd"></div>
<div class="aaaa"></div>
<div class="bbbb"></div>
<div class="cccc"></div>
<div class="dddd"></div>
</div>
</body>
</html>
用蒙版做特效