|
|
| 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> |
| | | | |
