html点击区域,求助HTML+CSS可以点击区域外关闭实现。

[CSS] 纯文本查看 复制代码.caidan {

position:fixed;

bottom:80px;

width:100%;

}

.nav {

overflow:hidden;

position:absolute;

left:50%;

top:50%;

width:auto;

height:50px;

margin-top:-25px;

border-radius:5px;

-webkit-transform:translate3d(-50%,0,0);

transform:translate3d(-50%,0,0);

}

.nav__cb {

z-index:-1000;

position:absolute;

left:0;

top:0;

opacity:0;

pointer-events:none;

}

.nav__content {

position:relative;

width:50px;

height:100%;

-webkit-transition:width 1s cubic-bezier(0.49,-0.3,0.68,1.23);

transition:width 1s cubic-bezier(0.49,-0.3,0.68,1.23);

}

.nav__cb:checked ~ .nav__content {

-webkit-transition:width 1s cubic-bezier(0.48,0.43,0.29,1.3);

transition:width 1s cubic-bezier(0.48,0.43,0.29,1.3);

width:350px;

}

.nav__items {

position:relative;

width:410px;

height:100%;

padding-left:20px;

padding-right:110px;

list-style-type:none;

font-size:0;

}

.nav__item {

display:inline-block;

vertical-align:top;

width:70px;

text-align:center;

color:#67676775;

font-size:14px;

line-height:50px;

font-family:Helvetica,Arial,sans-serif;

-webkit-perspective:1000px;

perspective:1000px;

-webkit-transition:color 0.3s;

transition:color 0.3s;

cursor:pointer;

}

.nav__item:hover {

color:#a5a5a5c4;

text-shadow:0px 0px 2px #71717145;

}

.nav__item-text {

display:block;

height:100%;

-webkit-transform:rotateY(-70deg);

transform:rotateY(-70deg);

opacity:0;

-webkit-transition:opacity 0.7s,-webkit-transform 0.7s cubic-bezier(0.48,0.43,0.7,2.5);

transition:opacity 0.7s,-webkit-transform 0.7s cubic-bezier(0.48,0.43,0.7,2.5);

transition:transform 0.7s cubic-bezier(0.48,0.43,0.7,2.5),opacity 0.7s;

transition:transform 0.7s cubic-bezier(0.48,0.43,0.7,2.5),opacity 0.7s,-webkit-transform 0.7s cubic-bezier(0.48,0.43,0.7,2.5);

}

.nav__cb:checked ~ .nav__content .nav__item-text {

-webkit-transform:rotateY(0);

transform:rotateY(0);

opacity:1;

-webkit-transition:opacity 0.2s,-webkit-transform 0.7s cubic-bezier(0.48,0.43,0.7,2.5);

transition:opacity 0.2s,-webkit-transform 0.7s cubic-bezier(0.48,0.43,0.7,2.5);

transition:transform 0.7s cubic-bezier(0.48,0.43,0.7,2.5),opacity 0.2s;

transition:transform 0.7s cubic-bezier(0.48,0.43,0.7,2.5),opacity 0.2s,-webkit-transform 0.7s cubic-bezier(0.48,0.43,0.7,2.5);

}

.nav__item:nth-child(1) .nav__item-text {

-webkit-transition-delay:0.3s;

transition-delay:0.3s;

}

.nav__cb:checked ~ .nav__content .nav__item:nth-child(1) .nav__item-text {

-webkit-transition-delay:0s;

transition-delay:0s;

}

.nav__item:nth-child(2) .nav__item-text {

-webkit-transition-delay:0.2s;

transition-delay:0.2s;

}

.nav__cb:checked ~ .nav__content .nav__item:nth-child(2) .nav__item-text {

-webkit-transition-delay:0.1s;

transition-delay:0.1s;

}

.nav__item:nth-child(3) .nav__item-text {

-webkit-transition-delay:0.1s;

transition-delay:0.1s;

}

.nav__cb:checked ~ .nav__content .nav__item:nth-child(3) .nav__item-text {

-webkit-transition-delay:0.2s;

transition-delay:0.2s;

}

.nav__item:nth-child(4) .nav__item-text {

-webkit-transition-delay:0s;

transition-delay:0s;

}

.nav__cb:checked ~ .nav__content .nav__item:nth-child(4) .nav__item-text {

-webkit-transition-delay:0.3s;

transition-delay:0.3s;

}

.nav__btn {

position:absolute;

right:0;

top:0;

width:15px;

height:15px;

padding:24px 18px;

cursor:pointer;

}

.nav__btn:before,.nav__btn:after {

content:"";

display:block;

width:15px;

height:2px;

border-radius:3px;

background:#bfbfbf61;

-webkit-transform-origin:50% 50%;

transform-origin:50% 50%;

-webkit-transition:background-color 0.3s,-webkit-transform 1s cubic-bezier(0.48,0.43,0.29,1.3);

transition:background-color 0.3s,-webkit-transform 1s cubic-bezier(0.48,0.43,0.29,1.3);

transition:transform 1s cubic-bezier(0.48,0.43,0.29,1.3),background-color 0.3s;

transition:transform 1s cubic-bezier(0.48,0.43,0.29,1.3),background-color 0.3s,-webkit-transform 1s cubic-bezier(0.48,0.43,0.29,1.3);

}

.nav__btn:before {

margin-bottom:-2px;

transform:rotate(90deg);

}

.nav__btn:hover:before,.nav__btn:hover:after {

background:#bbbbbb;

}

.nav__cb:checked ~ .nav__btn:before {

-webkit-transform:translateY(0px) rotate(-45deg);

transform:translateY(0px) rotate(-45deg);

}

.nav__cb:checked ~ .nav__btn:after {

-webkit-transform:translateY(0px) rotate(45deg);

transform:translateY(0px) rotate(45deg);

}