|
body{ |
|
display:flex; |
|
justify-content:center; |
|
align-items:center; |
|
background:#111; |
|
height:100vh; |
|
--orange: #ff7b0a; |
|
--pink: #fe3a7d; |
|
--gray: #ccc; |
|
*{ |
|
font-family:'Lato'; |
|
} |
|
#wrap{ |
|
width:100%; |
|
max-width:800px; |
|
min-width:800px; |
|
position:relative; |
|
margin-top:-175px; |
|
&.flip{ |
|
svg{ |
|
path{ |
|
animation:flip 2s ease-in-out 1 forwards; |
|
} |
|
} |
|
input[type="email"]{ |
|
opacity:0; |
|
} |
|
.btnwrap{ |
|
.spark{ |
|
animation:spark 0.3s ease-in-out 1 forwards; |
|
@keyframes spark{ |
|
0%{ |
|
transform:rotate(45deg) scale(0); |
|
} |
|
50%{ |
|
transform:rotate(135deg) scale(1); |
|
} |
|
100%{ |
|
transform:rotate(45deg) scale(0); |
|
} |
|
} |
|
@for $i from 1 through 6{ |
|
&:nth-of-type(#{$i}){ |
|
animation-delay:#{($i / 10) + 2.25}s; |
|
} |
|
} |
|
} |
|
} |
|
form{ |
|
z-index:2; |
|
b{ |
|
&:before{ |
|
animation:openclose 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1 forwards; |
|
animation-delay:1.5s; |
|
} |
|
@keyframes openclose{ |
|
0%{ |
|
transform:rotate(0deg); |
|
} |
|
25%{ |
|
transform:rotate(-100deg); |
|
} |
|
75%{ |
|
transform:rotate(-100deg); |
|
} |
|
100%{ |
|
transform:rotate(0deg); |
|
} |
|
} |
|
} |
|
} |
|
.field{ |
|
z-index:1; |
|
.word{ |
|
position:relative; |
|
&.slide{ |
|
display:inline-block; |
|
width:100%; |
|
transform-origin:42.5% 50%; |
|
animation:jump 2.25s ease-in-out 1 forwards; |
|
@keyframes jump{ |
|
0%{ |
|
transform:translateX(0) rotate(0deg); |
|
} |
|
70%{ |
|
transform:translateX(-20px) rotate(-11.5deg); |
|
} |
|
75%{ |
|
transform:translateX(-20px) rotate(-11.5deg); |
|
} |
|
100%{ |
|
transform:translateX(0px) rotate(180deg); |
|
} |
|
} |
|
} |
|
.char{ |
|
display:inline-block; |
|
color:transparent; |
|
position:relative; |
|
&:after{ |
|
content:attr(data-char); |
|
position:absolute; |
|
display:inline-block; |
|
left:0; |
|
top:0; |
|
color:#555; |
|
animation:tumble 2s ease-in 1 forwards; |
|
@keyframes tumble{ |
|
0%{ |
|
transform:rotate(0deg) |
|
} |
|
100%{ |
|
transform:rotate(-180deg); |
|
} |
|
} |
|
} |
|
@for $i from 1 through 150{ |
|
&:nth-of-type(#{$i}){ |
|
transform:translateX(0px); |
|
&.slide{ |
|
transition:#{0.2 + ($i / 50)}s ease-in; |
|
transition-delay:0.05s; |
|
transform:translateX(#{($i - 1) * -9.25px}); |
|
&:after{ |
|
animation-duration:#{0.25 + ($i / 50)}s; |
|
animation-delay:#{$i / 50}s; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.field{ |
|
position:absolute; |
|
top:62.5px; |
|
left:50px; |
|
z-index:999; |
|
width:100%; |
|
p{ |
|
color:#000; |
|
font-size:20px; |
|
span{ |
|
transition:1s ease-in-out; |
|
} |
|
} |
|
} |
|
form{ |
|
position:absolute; |
|
width:100%; |
|
.btnwrap{ |
|
position:absolute; |
|
right:0; |
|
} |
|
.spark{ |
|
position:absolute; |
|
width:15px; |
|
height:3px; |
|
background:linear-gradient(to right, var(--pink), var(--orange), var(--pink)); |
|
top:-25px; |
|
border-radius:100px; |
|
right:10px; |
|
transform:rotate(45deg) scale(0); |
|
margin-top:50px; |
|
&:nth-of-type(4){ |
|
right:-50px; |
|
top:0; |
|
} |
|
&:nth-of-type(3){ |
|
right:-50px; |
|
top:30px; |
|
} |
|
&:nth-of-type(2){ |
|
right:-10px; |
|
top:105px; |
|
} |
|
&:nth-of-type(5){ |
|
right:20px; |
|
top:120px; |
|
} |
|
&:nth-of-type(6){ |
|
right:-20px; |
|
top:-15px; |
|
} |
|
&:before{ |
|
content:''; |
|
position:absolute; |
|
width:3px; |
|
height:15px; |
|
background:linear-gradient(to bottom, var(--pink), var(--orange), var(--pink)); |
|
top:calc(50% - 7.5px); |
|
left:calc(50% - 1.5px); |
|
border-radius:inherit; |
|
} |
|
} |
|
input[type="email"]{ |
|
text-transform:lowercase; |
|
position:absolute; |
|
height:70px; |
|
background:transparent; |
|
width:calc(100% - 275px); |
|
padding-left:50px; |
|
border:none; |
|
box-shadow:none; |
|
left:0; |
|
top:57.5px; |
|
z-index:9; |
|
font-size:20px; |
|
outline:none; |
|
color:#555; |
|
} |
|
input[type="submit"]{ |
|
height:70px; |
|
position:absolute; |
|
right:0; |
|
top:57.5px; |
|
padding-left:35px; |
|
padding-right:35px; |
|
font-size:20px; |
|
opacity:0; |
|
|
|
} |
|
b{ |
|
position:absolute; |
|
color:#fff; |
|
font-size:20px; |
|
background:linear-gradient(to bottom, var(--orange), var(--pink)); |
|
height:70px; |
|
display:flex; |
|
justify-content:center; |
|
align-items:center; |
|
padding-left:35px; |
|
padding-right:35px; |
|
border-radius:0 80px 80px 0; |
|
right:0; |
|
top:58px; |
|
&:before{ |
|
content:''; |
|
position:absolute; |
|
width:calc(100% - 20px); |
|
background:var(--orange); |
|
height:5px; |
|
top:5px; |
|
left:0; |
|
transform-origin:5px 100%; |
|
border-radius:0 30px 30px 0; |
|
z-index:-1; |
|
} |
|
} |
|
} |
|
svg{ |
|
width:100%; |
|
height:auto; |
|
position:absolute; |
|
left:-150px; |
|
z-index:0; |
|
path{ |
|
stroke:#fff; |
|
fill:transparent; |
|
stroke-width:25px; |
|
@keyframes flip{ |
|
0%{ |
|
d: path("M286.3,33.3H138.7c-50.1,0-70.1,0-70.1,0"); |
|
} |
|
90%{ |
|
d: path("M286.3,33.3H138.7c-50.1,0-70.1,24.4-70.1,24.4"); |
|
animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1.275); |
|
} |
|
100%{ |
|
d: path("M286.3,33.3H138.7c-50.1,0-70.1,0-70.1,0"); |
|
animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1.275); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |