|
|
Line 60: |
Line 60: |
| } | | } |
| | | |
− | wrapper {
| |
− | margin: 40px auto;
| |
− | width: 400px;
| |
− | display: block;
| |
− | text-align: center;
| |
− | -webkit-transition: 0.15s ease;
| |
− | transition: 0.15s ease;
| |
− | }
| |
− | .wrapper.active .arrow {
| |
− | -webkit-transform: rotate(45deg) translate(-5px, -5px);
| |
− | transform: rotate(45deg) translate(-5px, -5px);
| |
− | }
| |
− | .wrapper.active .arrow:before {
| |
− | -webkit-transform: translate(10px, 0);
| |
− | transform: translate(10px, 0);
| |
− | }
| |
− | .wrapper.active .arrow:after {
| |
− | -webkit-transform: rotate(90deg) translate(10px, 0);
| |
− | transform: rotate(90deg) translate(10px, 0);
| |
− | }
| |
− | .wrapper.active ul {
| |
− | opacity: 0.3;
| |
− | height: 108px;
| |
− | }
| |
| | | |
− | .wrapper2 ul {
| |
− | border: 1px solid rgba(255, 255, 255, 0.5);
| |
− | }
| |
− | .wrapper2 li:first-child {
| |
− | margin-top: 16px;
| |
− | }
| |
− | .wrapper2 li:last-child {
| |
− | margin-bottom: 3px;
| |
− | }
| |
− | .wrapper2.active ul {
| |
− | margin-top: 12px;
| |
− | }
| |
− | .wrapper2.active .arrow {
| |
− | -webkit-transform: rotate(45deg) translate(38px, 38px);
| |
− | transform: rotate(45deg) translate(38px, 38px);
| |
− | opacity: 0.6;
| |
− | }
| |
− | .wrapper2.active .arrow:before {
| |
− | -webkit-transform: translate(5px, 0);
| |
− | transform: translate(5px, 0);
| |
− | }
| |
− | .wrapper2.active .arrow:after {
| |
− | -webkit-transform: rotate(90deg) translate(5px, 0);
| |
− | transform: rotate(90deg) translate(5px, 0);
| |
− | }
| |
− |
| |
− | .wrapper3 .arrow {
| |
− | -webkit-transform: rotate(0);
| |
− | transform: rotate(0);
| |
− | left: 0;
| |
− | }
| |
− | .wrapper3 .arrow:before, .wrapper3 .arrow:after {
| |
− | background-color: transparent;
| |
− | width: 3px;
| |
− | height: 10px;
| |
− | display: inline-block;
| |
− | position: absolute;
| |
− | border-bottom: 12px solid white;
| |
− | top: 0;
| |
− | left: 0;
| |
− | -webkit-transform: rotate(0);
| |
− | transform: rotate(0);
| |
− | }
| |
− | .wrapper3 .arrow:before {
| |
− | -webkit-transform: rotate(-135deg);
| |
− | transform: rotate(-135deg);
| |
− | }
| |
− | .wrapper3 .arrow:after {
| |
− | -webkit-transform: rotate(135deg);
| |
− | transform: rotate(135deg);
| |
− | }
| |
− | .wrapper3.active .arrow {
| |
− | -webkit-transform: rotate(0);
| |
− | transform: rotate(0);
| |
− | -webkit-transform: translate(0, -6px);
| |
− | transform: translate(0, -6px);
| |
− | }
| |
− | .wrapper3.active .arrow:before {
| |
− | -webkit-transform: rotate(-45deg);
| |
− | transform: rotate(-45deg);
| |
− | }
| |
− | .wrapper3.active .arrow:after {
| |
− | -webkit-transform: rotate(45deg);
| |
− | transform: rotate(45deg);
| |
− | }
| |
− |
| |
− | .arrow {
| |
− | width: 13px;
| |
− | height: 13px;
| |
− | display: inline-block;
| |
− | position: relative;
| |
− | bottom: -5px;
| |
− | left: -10px;
| |
− | -webkit-transition: 0.4s ease;
| |
− | transition: 0.4s ease;
| |
− | margin-top: 2px;
| |
− | text-align: left;
| |
− | -webkit-transform: rotate(45deg);
| |
− | transform: rotate(45deg);
| |
− | float: right;
| |
− | }
| |
− | .arrow:before, .arrow:after {
| |
− | position: absolute;
| |
− | content: "";
| |
− | display: inline-block;
| |
− | width: 12px;
| |
− | height: 3px;
| |
− | background-color: #fff;
| |
− | -webkit-transition: 0.4s ease;
| |
− | transition: 0.4s ease;
| |
− | }
| |
− | .arrow:after {
| |
− | position: absolute;
| |
− | -webkit-transform: rotate(90deg);
| |
− | transform: rotate(90deg);
| |
− | top: -5px;
| |
− | left: 5px;
| |
− | }
| |
− |
| |
− | .click-text {
| |
− | display: block;
| |
− | text-align: left;
| |
− | padding: 0 12px 16px;
| |
− | margin: 0;
| |
− | cursor: pointer;
| |
− | color: rgba(255, 255, 255, 0.3);
| |
− | border-bottom: 1px solid rgba(255, 255, 255, 0.2);
| |
− | -webkit-transition: 0.15s ease;
| |
− | transition: 0.15s ease;
| |
− | }
| |
− | .click-text:hover {
| |
− | color: rgba(255, 255, 255, 0.6);
| |
− | border-bottom-color: rgba(255, 255, 255, 0.4);
| |
− | }
| |
− |
| |
− | ul {
| |
− | padding: 0;
| |
− | margin: 0;
| |
− | height: 0;
| |
− | overflow: hidden;
| |
− | opacity: 0;
| |
− | -webkit-transition: 0.4s ease;
| |
− | transition: 0.4s ease;
| |
− | border-bottom: 1px solid rgba(255, 255, 255, 0.5);
| |
− | }
| |
− |
| |
− | li {
| |
− | list-style-type: none;
| |
− | margin: 0 auto;
| |
− | padding: 4px 12px;
| |
− | text-align: left;
| |
− | cursor: pointer;
| |
− | }
| |
− | li:first-child {
| |
− | margin-top: 12px;
| |
− | }
| |
− | li:last-child {
| |
− | margin-bottom: 12px;
| |
− | }
| |
− |
| |
− |
| |
| </style> | | </style> |
| | | |