.Lighthouse .relbox .head .headMini .light .rayLeft .rayRight .row .rect .preTube .tubeabsolut position absolute margin auto top 0 right 0 bottom 0 left 0body background-color #F9324A.Lighthouse width 50vw height 50vh position absolute top 0 right 0 bottom 0 left 0 margin auto transform-style preserve-3d.relbox position relative width 100% height 100%.head @extends absolut; top -460px height 100px width 160px border-radius 160px 160px 0 0 background rgba(0, 0, 0, 0.2) &:before content ' ' position absolute left 36px top 10px height 100px*0.9 width 160px*0.9 border-radius 160px*0.9 160px*0.9 0 0 background #F9324A z-index 9.headMini @extends absolut; top -568px height 10px width 20px border-radius 20px 20px 0 0 background rgba(0, 0, 0, 0.2).light @extends absolut; top -320px height 20px width 20px background-color #fff border-radius 50%.rayLeft @extends absolut; z-index 99 top -320px left -400px width 0 height 0 border-style solid border-width 50px 0 50px 360px; border-color transparent transparent transparent rgba(255, 255, 255, 0.25) animation rayLeft 4s linear 0 infinite.rayRight @extends absolut; z-index 99 top -320px right -400px width 0 height 0 border-style solid border-width 50px 360px 50px 0; border-color transparent rgba(255, 255, 255, 0.25) transparent transparent animation rayRight 4s linear 0 infinite.row @extends absolut; top -260px background-color #F9324A width 180px height 20px border-radius 50px &:before content ' ' position absolute top 0px background-color rgba(0, 0, 0, 0.2) border-radius 50px 0 0 50px width 50px height 20px &:after content ' ' position absolute top 0px left 40px background-color #F9324A border-radius 50% width 20px height 20px.rect @extends absolut; top -160px background-color #F9324A width 160px height 80px box-shadow inset 0px 3px 5px -2px rgba(0, 0, 0, 0.85) background linear-gradient(-45deg, transparent, transparent 37%, #fff 37%, #fff 67%, transparent 67%), linear-gradient(left, #F9324A, #F9324A) background-size 200px 436px, 100% 100%, 100% 100% animation move 2.4s linear 0 infinite &:before content ' ' position absolute top 0px background-color rgba(0, 0, 0, 0.2) width 36px height 80px.preTube @extends absolut; height 20px border-radius 50px top -70px background-color #F9324A width 200px &:before content ' ' position absolute top 0px background-color rgba(0, 0, 0, 0.2) border-radius 50px 0 0 50px width 60px height 20px &:after content ' ' position absolute top 0px left 50px background-color #F9324A border-radius 50% width 20px height 20px.tube perspective-origin 25% 75% @extends absolut; top 251px height 400px width 200px box-shadow inset 0px 3px 5px -2px rgba(0, 0, 0, 0.85) background linear-gradient(-45deg, transparent, transparent 37%, #fff 37%, #fff 67%, transparent 67%), linear-gradient(left, #F9324A, #F9324A) background-size 200px 436px, 100% 100%, 100% 100% transform perspective(400px) rotateX(25deg) animation moveTube 2.4s linear 0 infinite &:before content ' ' position absolute top 0px background-color rgba(0, 0, 0, 0.2) width 50px height 400px@keyframes move 0% background-position 0px 80px, 0 0, 0 0 100% background-position 0px -356px, 100% 0, 0 0@keyframes moveTube 0% background-position 0px 0px, 0 0, 0 0 100% background-position 0px -436px, 100% 0, 0 0@keyframes rayLeft 0% transform translateX(0px) scale(1, 1) 50% transform translateX(400px) scale(-1, 1) 100% transform translateX(0px) scale(1, 1)@keyframes rayRight 0% transform translateX(0px) scale(1, 1) 50% transform translateX(-400px) scale(-1, 1) 100% transform translateX(0px) scale(1, 1)/** This is only draft, i will fix all troubles later (: ** Inspired by https://dribbble.com/shots/1788738-Lighthouse* */