Stronghold

1

2

3

4

5

6

7

8

9

10

11

12


/* ALL（共通） */
.box{width: 200px; height: 200px; line-height: 200px; text-align: center; position: relative;}
.bd div{background: #000; position:absolute;-webkit-transition:all 0.3s;transition:all 0.3s;}
.bd div.bdT{width: 100%; height:2px; top:0; left:0;}
.bd div.bdB{width: 100%; height:2px; bottom:0; right:0;}
.bd div.bdR{height:100%; width :2px; right:0; top:0;}
.bd div.bdL{height:100%; width :2px; left:0; bottom:0;}

/*++++++++++ マウスオーバーでの実装 ++++++++++*/

/* No.1 */
.box:hover .bd1 div.bdT{width: 0;}
.box:hover .bd1 div.bdB{width: 0;}
.box:hover .bd1 div.bdR{height:0;}
.box:hover .bd1 div.bdL{height:0;}

/* No.2 */
.bd2 div{-webkit-transition:all 0.1s;transition:all 0.1s;}
.bd2 div.bdT{transition-delay:0.3s;}
.bd2 div.bdL{transition-delay:0.2s;}
.bd2 div.bdB{transition-delay:0.1s;}
.bd2 div.bdR{transition-delay:0s;}
.box:hover .bd2 div.bdT{width: 0;transition-delay:0s;}
.box:hover .bd2 div.bdL{height:0;transition-delay:0.1s;}
.box:hover .bd2 div.bdB{width: 0;transition-delay:0.2s;}
.box:hover .bd2 div.bdR{height:0;transition-delay:0.3s;}

/* No.3 */
.bd3 div{-webkit-transition:all 0.2s;transition:all 0.2s;}
.box:hover .bd3 div.bdT{-webkit-transform: translate(0,-20px); transform: translate(0,-20px);}
.box:hover .bd3 div.bdB{-webkit-transform: translate(0,20px);  transform: translate(0,20px); }
.box:hover .bd3 div.bdR{-webkit-transform: translate(20px,0);  transform: translate(20px,0); }
.box:hover .bd3 div.bdL{-webkit-transform: translate(-20px,0); transform: translate(-20px,0);}

/* No.4 */
.bd4 div{-webkit-transition:all 0.2s;transition:all 0.2s;}
.box:hover .bd4 div.bdT{-webkit-transform: translate(0,20px); transform: translate(0,20px);}
.box:hover .bd4 div.bdB{-webkit-transform: translate(0,-20px); transform: translate(0,-20px);}
.box:hover .bd4 div.bdR{-webkit-transform: translate(-20px,0); transform: translate(-20px,0);}
.box:hover .bd4 div.bdL{-webkit-transform: translate(20px,0); transform: translate(20px,0);}

/* No.5 */
.bd5 div{-webkit-transition:all 0.2s;transition:all 0.2s;}
.box:hover .bd5 div.bdT{-webkit-transform:rotate(45deg) translate(0,20px);  transform:rotate(45deg) translate(0,20px);}
.box:hover .bd5 div.bdB{-webkit-transform:rotate(45deg) translate(0,-20px); transform:rotate(45deg) translate(0,-20px);}
.box:hover .bd5 div.bdR{-webkit-transform:rotate(45deg) translate(-20px,0); transform:rotate(45deg) translate(-20px,0);}
.box:hover .bd5 div.bdL{-webkit-transform:rotate(45deg) translate(20px,0);  transform:rotate(45deg) translate(20px,0);}

/* No.6 */
.bd6 div{-webkit-transition:all 0.2s;transition:all 0.2s;}
.bd6 div:after{content:''; background: #000; position: absolute;-webkit-transition:all 0.2s;transition:all 0.2s;-webkit-transform: translate(0,0); transform: translate(0,0);}
.bd6 div.bdT:after{width: 100%; height:2px; top:0; left:0;}
.bd6 div.bdB:after{width: 100%; height:2px; bottom:0; right:0;}
.bd6 div.bdR:after{height:100%; width :2px; right:0; top:0;}
.bd6 div.bdL:after{height:100%; width :2px; left:0; bottom:0;}
.box:hover .bd6 div.bdT{-webkit-transform: translate(0,5px); transform: translate(0,5px);}
.box:hover .bd6 div.bdB{-webkit-transform: translate(0,-5px);  transform: translate(0,-5px);}
.box:hover .bd6 div.bdR{-webkit-transform: translate(-5px,0);  transform: translate(-5px,0);}
.box:hover .bd6 div.bdL{-webkit-transform: translate(5px,0); transform: translate(5px,0);}
.box:hover .bd6 div.bdT:after{-webkit-transform: translate(0,-5px); transform: translate(0,-5px);}
.box:hover .bd6 div.bdB:after{-webkit-transform: translate(0,5px); transform: translate(0,5px);}
.box:hover .bd6 div.bdR:after{-webkit-transform: translate(5px,0); transform: translate(5px,0);}
.box:hover .bd6 div.bdL:after{-webkit-transform: translate(-5px,0); transform: translate(-5px,0);}

/* No.7 */
.bd7 div{background: none}
.bd7 div:before,.bd7 div:after{content:''; background: #000; position: absolute;-webkit-transition:all 0.1s;transition:all 0.1s;}
.bd7 div:before{background: #eee}
.bd7 div.bdT:after,.bd7 div.bdT:before{width: 100%; height:2px; top:0; left:0;    }
.bd7 div.bdB:after,.bd7 div.bdB:before{width: 100%; height:2px; bottom:0; right:0;}
.bd7 div.bdR:after,.bd7 div.bdR:before{height:100%; width :2px; right:0; top:0;   }
.bd7 div.bdL:after,.bd7 div.bdL:before{height:100%; width :2px; left:0; bottom:0; }
.bd7 div.bdT:after{transition-delay:0.7s;}
.bd7 div.bdL:after{transition-delay:0.6s;}
.bd7 div.bdB:after{transition-delay:0.5s;}
.bd7 div.bdR:after{transition-delay:0.4s;}
.bd7 div.bdT:before{transition-delay:0.3s;}
.bd7 div.bdL:before{transition-delay:0.2s;}
.bd7 div.bdB:before{transition-delay:0.1s;}
.bd7 div.bdR:before{transition-delay:0.0s;}
.box:hover .bd7 div.bdT:after {width: 0;transition-delay:0.0s;}
.box:hover .bd7 div.bdL:after {height:0;transition-delay:0.1s;}
.box:hover .bd7 div.bdB:after {width: 0;transition-delay:0.2s;}
.box:hover .bd7 div.bdR:after {height:0;transition-delay:0.3s;}
.box:hover .bd7 div.bdT:before{width: 0;transition-delay:0.4s;}
.box:hover .bd7 div.bdL:before{height:0;transition-delay:0.5s;}
.box:hover .bd7 div.bdB:before{width: 0;transition-delay:0.6s;}
.box:hover .bd7 div.bdR:before{height:0;transition-delay:0.7s;}

/* No.8 */
.bd8 div{-webkit-transition:all 0.2s;transition:all 0.2s;}
.box:hover .bd8 div.bdT{-webkit-transform:translate(100px,0);  transform:translate(0,20px);}
.box:hover .bd8 div.bdB{-webkit-transform:translate(-100px,0); transform:translate(0,-20px);}
.box:hover .bd8 div.bdR{-webkit-transform:translate(0px,-100px); transform:translate(-20px,0);}
.box:hover .bd8 div.bdL{-webkit-transform:translate(0,100px);  transform:translate(20px,0);}

/* No.9 */
.bd9 div{-webkit-transition:all 0.2s;transition:all 0.2s; background: none}
.bd9 div:before,.bd9 div:after{content:''; background: #000; position: absolute;-webkit-transition:all 0.2s;transition:all 0.2s;-webkit-transform: translate(0,0); transform: translate(0,0);}
.bd9 div.bdT:after,.bd9 div.bdT:before{width: 100%; height:2px; top:0; left:0;}
.bd9 div.bdB:after,.bd9 div.bdB:before{width: 100%; height:2px; bottom:0; right:0;}
.bd9 div.bdR:after,.bd9 div.bdR:before{height:100%; width :2px; right:0; top:0;}
.bd9 div.bdL:after,.bd9 div.bdL:before{height:100%; width :2px; left:0; bottom:0;}
.box:hover .bd9 div.bdT:before{width: 50%;-webkit-transform: translate(100px,0); transform: translate(0,0);}
.box:hover .bd9 div.bdB:before{width: 50%;-webkit-transform: translate(-100px,0); transform: translate(0,0);}
.box:hover .bd9 div.bdR:before{height:50%;-webkit-transform: translate(0,-100px); transform: translate(0,0);}
.box:hover .bd9 div.bdL:before{height:50%;-webkit-transform: translate(0,100px); transform: translate(0,0);}
.box:hover .bd9 div.bdT:after {width: 50%;-webkit-transform: translate(-100px,0); transform: translate(0,0);}
.box:hover .bd9 div.bdB:after {width: 50%;-webkit-transform: translate(100px,0); transform: translate(0,0);}
.box:hover .bd9 div.bdR:after {height:50%;-webkit-transform: translate(0,100px); transform: translate(0,0);}
.box:hover .bd9 div.bdL:after {height:50%;-webkit-transform: translate(0,-100px); transform: translate(0,0);}

/* No.10 */
.bd10 div{-webkit-transition:all 0.2s;transition:all 0.2s;}
.box:hover .bd10 div.bdT{width: 5px; height: 5px;}
.box:hover .bd10 div.bdB{width: 5px; height: 5px;}
.box:hover .bd10 div.bdR{width: 5px; height: 5px;}
.box:hover .bd10 div.bdL{width: 5px; height: 5px;}

/* No.11 */
.bd11 div{display: none;}
.bd11 {border: 2px solid #000; height: 100%; width: 100%; position: absolute; top: 0;-webkit-transition:all 0.3s;transition:all 0.3s;}
.box:hover .bd11 {-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transform:rotate(180deg); transform:rotate(180deg);border-radius: 50%;}

/* No.12 */
.bd12 div{-webkit-transition:all 0.2s;transition:all 0.2s;}
.box:hover .bd12 div.bdT{width: 30%;-webkit-transform: translate(70px,100px); transform: translate(70px,100px);}
.box:hover .bd12 div.bdB{width: 30%;-webkit-transform: translate(-70px,-100px); transform: translate(-70px,-100px);}
.box:hover .bd12 div.bdR{height:30%;-webkit-transform: translate(-100px,70px); transform: translate(-100px,70px);}
.box:hover .bd12 div.bdL{height:30%;-webkit-transform: translate(100px,-70px); transform: translate(100px,-70px);}