|
|
Line 292: |
Line 292: |
| z-index: -1; | | z-index: -1; |
| margin-left: 50px; | | margin-left: 50px; |
− | }
| |
− |
| |
− | .bubble {
| |
− | position: fixed;
| |
− | width: 20%;
| |
− | margin-left: 50px;
| |
− | z-index: -1;
| |
− | }
| |
− |
| |
− | .scrolldown {
| |
− | background: none;
| |
− | }
| |
− |
| |
− | .scroll a:hover {
| |
− | opacity: .5;
| |
− | }
| |
− |
| |
− | .a {
| |
− | background: transparent;
| |
− | }
| |
− |
| |
− | .content {
| |
− | margin:0;
| |
− | padding: 60px 0;
| |
− | width: 50%;
| |
− | margin-left: 500px;
| |
− | }
| |
− |
| |
− | .scroll-down {
| |
− |
| |
− | opacity: 1;
| |
− |
| |
− | -webkit-transition: all .5s ease-in 3s;
| |
− |
| |
− | transition: all .5s ease-in 3s;
| |
− |
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− | .scroll-down {
| |
− |
| |
− | position: absolute;
| |
− |
| |
− | bottom: 20px;
| |
− |
| |
− | left: 50%;
| |
− |
| |
− | margin-left: -24px;
| |
− |
| |
− | z-index: 2;
| |
− |
| |
− | -webkit-animation: bounce 2s infinite 2s;
| |
− |
| |
− | animation: bounce 2s infinite 2s;
| |
− |
| |
− | -webkit-transition: all .2s ease-in;
| |
− |
| |
− | transition: all .2s ease-in;
| |
− |
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− | .scroll-down: before {
| |
− |
| |
− | position: absolute;
| |
− |
| |
− | top: calc(50% - 8px);
| |
− |
| |
− | left: calc(50% - 6px);
| |
− |
| |
− | transform: rotate(-45deg);
| |
− |
| |
− | display: block;
| |
− |
| |
− | width: 12px;
| |
− |
| |
− | height: 12px;
| |
− |
| |
− | content: "";
| |
− |
| |
− | border: 2px solid white;
| |
− |
| |
− | border-width: 0px 0 2px 2px;
| |
− |
| |
− | }
| |
− |
| |
− |
| |
− | .scroll-down {
| |
− | margin-top: -10px;
| |
− |
| |
− | }
| |
− |
| |
− | @keyframes bounce {
| |
− |
| |
− | 0%,
| |
− |
| |
− | 100%,
| |
− |
| |
− | 20%,
| |
− |
| |
− | 50%,
| |
− |
| |
− | 80% {
| |
− |
| |
− | -webkit-transform: translateY(0);
| |
− |
| |
− | -ms-transform: translateY(0);
| |
− |
| |
− | transform: translateY(0);
| |
− |
| |
− | }
| |
− |
| |
− |
| |
− | 40% {
| |
− |
| |
− | -webkit-transform: translateY(-10px);
| |
− |
| |
− | -ms-transform: translateY(-10px);
| |
− |
| |
− | transform: translateY(-10px);
| |
− |
| |
− | }
| |
− |
| |
− | 60% {
| |
− |
| |
− | -webkit-transform: translateY(-5px);
| |
− |
| |
− | -ms-transform: translateY(-5px);
| |
− |
| |
− | transform: translateY(-5px);
| |
− |
| |
− | }
| |
− |
| |
| } | | } |
| /**************************************************************************************************************************************************************************************************/ | | /**************************************************************************************************************************************************************************************************/ |