##Vaporsun π΄
Vaporwave sun palmtree
A Pen by Luciano Felix on CodePen.
figure | |
.stripes-wraper | |
for i in Array(16) | |
.stripe | |
.gradient-mask | |
.palm-tree | |
figcaption | |
| Inspired in | |
| | |
a(href='https://www.instagram.com/p/Bore267lC-_/' target='_blank') Vaporsun | |
| | |
| by | |
| | |
a(href='https://www.instagram.com/motus_art/' target='_blank') Motus Art |
// Looking for something? |
body | |
height: 100vh | |
overflow: hidden | |
figure | |
width: 100% | |
height: 100% | |
margin: 0 !important | |
background-color: #000 | |
display: flex | |
justify-content: center | |
align-items: center | |
.stripes-wraper | |
width: 450px | |
height: 450px | |
border-radius: 50% | |
filter: drop-shadow(0 0 20px #F29) | |
overflow: hidden | |
position: absolute | |
.stripe | |
width: 100% | |
height: 15px | |
background-color: #FFF | |
animation: scroll 1s linear infinite | |
@keyframes scroll | |
from | |
transform: translateY(-30px) | |
& + & | |
margin-top: 15px | |
.gradient-mask | |
width: 100% | |
height: 100% | |
background: linear-gradient(to bottom, #92F 0%, #F29 100%) | |
mix-blend-mode: multiply | |
position: absolute | |
.palm-tree | |
width: 450px | |
height: 601px | |
background-image: url(https://res.cloudinary.com/tecice/image/upload/v1581216237/palm-tree.png) | |
transform: scale(.8) translateY(75px) | |
position: absolute | |
figcaption | |
color: #EEE | |
position: fixed | |
right: 20px | |
bottom: 10px | |
a | |
color: #F29 | |
text-decoration: none |
##Vaporsun π΄
Vaporwave sun palmtree
A Pen by Luciano Felix on CodePen.