- <!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>
来源: http://www.bubuko.com/infodetail-2563297.html