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); | ||
+ | } | ||
+ | |||
+ | .arrow-first { | ||
+ | animation: arrow-movement $ani-speed ease-in-out infinite; | ||
+ | } | ||
+ | .arrow-second { | ||
+ | animation: arrow-movement $ani-speed $ani-delay ease-in-out infinite; | ||
+ | } | ||
+ | |||
+ | .arrow:before, | ||
+ | .arrow:after { | ||
+ | background: #fff; | ||
+ | content: ''; | ||
+ | display: block; | ||
+ | height: 3px; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 30px; | ||
+ | } | ||
+ | |||
+ | .arrow:before { | ||
+ | transform: rotate(45deg) translateX(-23%); | ||
+ | transform-origin: top left; | ||
+ | } | ||
+ | |||
+ | .arrow:after { | ||
+ | transform: rotate(-45deg) translateX(23%); | ||
+ | transform-origin: top right; | ||
+ | } | ||
+ | |||
+ | // Animation | ||
+ | @keyframes arrow-movement { | ||
+ | 0% { | ||
+ | opacity: 0; | ||
+ | top: 45%; | ||
+ | } | ||
+ | 70% { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | 100% { | ||
+ | opacity: 0; | ||
+ | } | ||
} | } | ||
</style> | </style> | ||
Line 81: | Line 133: | ||
D E S C R I P T I O N | D E S C R I P T I O N | ||
</div> | </div> | ||
+ | |||
+ | <div class="arrow arrow-first"></div> | ||
+ | <div class="arrow arrow-second"></div> | ||
</div> | </div> | ||
Revision as of 13:20, 24 May 2018
D E S C R I P T I O N