|
|
| Line 66: |
Line 66: |
| | text-align: center; | | text-align: center; |
| | z-index: 4; | | z-index: 4; |
| − | }
| |
| − |
| |
| − | .arrow {
| |
| − | opacity: 0;
| |
| − | position: absolute;
| |
| − | left: 50%;
| |
| − | top: 50%;
| |
| − | transform-origin: 50% 50%;
| |
| − | transform: translate3d(-50%, -50%, 0);
| |
| − | z-index: 4;
| |
| − | }
| |
| − |
| |
| − | .arrow-first {
| |
| − | animation: arrow-movement $ani-speed ease-in-out infinite;
| |
| − | z-index: 4;
| |
| − | }
| |
| − | .arrow-second {
| |
| − | animation: arrow-movement $ani-speed $ani-delay ease-in-out infinite;
| |
| − | z-index: 4;
| |
| − | }
| |
| − |
| |
| − | .arrow:before,
| |
| − | .arrow:after {
| |
| − | background: #fff;
| |
| − | content: '';
| |
| − | display: block;
| |
| − | height: 3px;
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 30px;
| |
| − | z-index: 4;
| |
| − | }
| |
| − |
| |
| − | .arrow:before {
| |
| − | transform: rotate(45deg) translateX(-23%);
| |
| − | transform-origin: top left;
| |
| − | z-index: 4;
| |
| − | }
| |
| − |
| |
| − | .arrow:after {
| |
| − | transform: rotate(-45deg) translateX(23%);
| |
| − | transform-origin: top right;
| |
| − | z-index: 4;
| |
| − | }
| |
| − |
| |
| − | // Animation
| |
| − | @keyframes arrow-movement {
| |
| − | 0% {
| |
| − | opacity: 0;
| |
| − | top: 45%;
| |
| − | }
| |
| − | 70% {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 0;
| |
| − | }
| |
| | } | | } |
| | </style> | | </style> |
| Line 140: |
Line 82: |
| | </div> | | </div> |
| | | | |
| − | <div class="arrow arrow-first"></div>
| |
| − | <div class="arrow arrow-second"></div>
| |
| | </div> | | </div> |
| | | | |
