|
body{ |
|
background: |
|
radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px, |
|
radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px, |
|
linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0, |
|
linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0, |
|
linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0, |
|
linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1; |
|
background-size: 40px 60px; |
|
} |
|
|
|
|
|
|
|
body{ |
|
display:flex; |
|
justify-content:center; |
|
align-items:center; |
|
height:100vh; |
|
overflow:hidden; |
|
--orange: #B71; |
|
--pink: #fb1; |
|
--gray: #ccc; |
|
#wrap{ |
|
position:relative; |
|
display:inline-block; |
|
height:70px; |
|
font-family:"Lato"; |
|
width:600px; |
|
margin-left:-40px; |
|
&:before{ |
|
content:''; |
|
position:fixed; |
|
width:100vw; |
|
height:100vh; |
|
background:url(https://media.giphy.com/media/YZaNlktdPMiTm/giphy.gif); |
|
background-size:cover; |
|
background-position:center; |
|
top:0; |
|
left:0; |
|
transition:1s ease-in-out; |
|
transition-delay:1s; |
|
opacity:0; |
|
pointer-events:none; |
|
} |
|
form.signup{ |
|
transition:0.5s ease-in-out; |
|
transition-delay:2s; |
|
opacity:1; |
|
} |
|
&.plunge{ |
|
pointer-events:none; |
|
&:before{ |
|
transition-delay:3.5s; |
|
opacity:0.75; |
|
} |
|
form.signup{ |
|
transition-delay:5s; |
|
opacity:0; |
|
.btnwrap{ |
|
.btn{ |
|
transition-delay:1.75s; |
|
transform:translateX(-90px); |
|
.inner{ |
|
height:100%; |
|
overflow:visible; |
|
width:calc(100% + 60px); |
|
animation:dropOut 2.5s ease-in-out 1 forwards; |
|
transition-delay:5s, 3.5s; |
|
background-size:100% 100%; |
|
animation-delay:2.75s; |
|
opacity:0; |
|
@keyframes dropOut{ |
|
0%{ |
|
transform:rotate(0deg); |
|
width:calc(100% + 60px); |
|
} |
|
10%{ |
|
transform-origin:0% 50%; |
|
transform:rotate(-90deg) translateX(-60px) translateY(-40px); |
|
width:100%; |
|
} |
|
12%{ |
|
transform-origin:0% 50%; transform:rotate(-88deg) translateX(-60px) translateY(-40px); |
|
width:100%; |
|
} |
|
17%{ |
|
transform-origin:0% 50%; transform:rotate(-92deg) translateX(-60px) translateY(-40px); |
|
width:100%; |
|
} |
|
20%{ |
|
transform-origin:0% 50%; transform:rotate(-88deg) translateX(-60px) translateY(-40px); |
|
width:100%; |
|
} |
|
23%{ |
|
transform-origin:0% 50%; transform:rotate(-91deg) translateX(-60px) translateY(-40px); |
|
width:100%; |
|
} |
|
25%{ |
|
transform-origin:0% 50%; transform:rotate(-90deg) translateX(-60px) translateY(-40px); |
|
width:100%; |
|
} |
|
75%{ |
|
transform-origin:0% 50%; transform:rotate(-90deg) translateX(-60px) translateY(-40px); |
|
width:100%; |
|
} |
|
100%{ |
|
transform-origin:0% 50%; transform:rotate(-90deg) translateX(-60px) translateX(-100vh); |
|
width:100%; |
|
} |
|
} |
|
&:after{ |
|
transition-delay:4s; |
|
transform:scaleX(1); |
|
} |
|
&:before{ |
|
transition-delay:1.75s; |
|
opacity:0; |
|
} |
|
.hive{ |
|
@for $i from 1 through 12{ |
|
&:nth-of-type(#{$i}){ |
|
transition-delay:#{($i / 20) + 3}s; |
|
border-radius:20px; |
|
box-shadow:inset 0 2px 0 0 var(--orange), inset 0 -2px 0 0 var(--orange), inset 2px 0px 0 0 var(--orange); |
|
&:before{ |
|
transition-delay:inherit; |
|
opacity:1; |
|
border-radius:20px; |
|
box-shadow:inset 0 1px 0 0 var(--orange), inset 0 -1px 0 0 var(--orange), inset 1px 0px 0 0 var(--orange); |
|
} |
|
} |
|
&:last-of-type{ |
|
box-shadow:inset 0 0px 0 0 var(--orange), inset 0 0px 0 0 var(--orange), inset 0px 0px 0 1px var(--orange); |
|
max-height:100%; |
|
width:10%; |
|
} |
|
} |
|
@for $i from 1 through 8{ |
|
&:nth-of-type(#{$i}){ |
|
height:150%; |
|
|
|
} |
|
} |
|
@for $i from 9 through 12{ |
|
&:nth-of-type(#{$i}){ |
|
height:#{130% - ($i * 1%)}; |
|
|
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
input[type="email"]{ |
|
color:transparent; |
|
transition-delay:2s; |
|
transform:translateX(-100px) scaleX(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}s; |
|
} |
|
} |
|
} |
|
} |
|
.field{ |
|
z-index:999; |
|
clip-path: polygon(-100% -300%, 95% -300%, 95% 400%, -100% 400%); |
|
p{ |
|
.word{ |
|
.char{ |
|
z-index:-1; |
|
offset-path:path("M 0 0 Q 150 50 150 100 Q 250 150 350 0 Q 350 50 500 0 "); |
|
&:before, &:after{ |
|
opacity:1; |
|
} |
|
@for $i from 1 through 10{ |
|
&:nth-of-type(#{$i}n){ |
|
animation:flyaway#{$i} 1.55s ease-in 1 forwards; |
|
will-change:margin; |
|
animation-delay:#{$i/15}s; |
|
@keyframes flyaway#{$i}{ |
|
0%{ |
|
margin-top:10px; |
|
} |
|
25%{ |
|
margin-left:#{$i * -2.45}px; |
|
margin-top:10px; |
|
offset-distance:0%; |
|
} |
|
95%{ |
|
margin-left:#{$i * -2.45}px; |
|
margin-top:0px; |
|
offset-distance:100%; |
|
opacity:1; |
|
} |
|
100%{ |
|
margin-left:#{$i * -2.45}px; |
|
offset-distance:110%; |
|
opacity:0; |
|
} |
|
} |
|
} |
|
} |
|
&:nth-of-type(2n){ |
|
animation-duration:1.25s; |
|
offset-path:path("M 0 0 Q 150 50 150 -100 Q 250 -150 350 0 Q 350 50 500 0 "); |
|
} |
|
&:nth-of-type(3n){ |
|
animation-duration:1.1s; |
|
offset-path:path("M 0 0 Q 150 250 150 100 Q 250 -150 350 0 Q 350 50 500 0 "); |
|
|
|
} |
|
&:nth-of-type(4n){ |
|
animation-duration:1.05s; |
|
offset-path:path("M 0 0 Q 150 50 150 0 Q 250 -50 250 0 Q 250 50 500 0 "); |
|
} |
|
&:nth-of-type(5n){ |
|
animation-duration:1.35s; |
|
offset-path:path("M 0 0 Q 150 50 350 0 Q 250 50 250 0 Q 150 50 500 0 "); |
|
} |
|
|
|
&:after{ |
|
transition:0.2s ease-in-out; |
|
transform:scale(0.75); |
|
z-index:-1; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.field{ |
|
position:absolute; |
|
height:70px; |
|
width:calc(100% - 180px); |
|
top:0px; |
|
left:50px; |
|
z-index:9; |
|
pointer-events:none; |
|
font-size:20px; |
|
font-family:"Lato"; |
|
line-height:1.5; |
|
p{ |
|
font-family:"Lato"; |
|
position:relative; |
|
display:inline-block; |
|
.word{ |
|
.char{ |
|
display:inline-block; |
|
z-index:2; |
|
position:relative; |
|
font-family:"Lato"; |
|
color:#000; |
|
font-weight:900; |
|
&:before, &:after{ |
|
content:''; |
|
position:absolute; |
|
width:15px; |
|
height:7.5px; |
|
background:#fff; |
|
box-shadow:0 0 0 1px #000; |
|
border-radius:50px 50px 0 0; |
|
left:-12.5px; |
|
top:5px; |
|
transform-origin:bottom right; |
|
animation:flap 0.05s ease-in-out infinite alternate; |
|
transition:opacity 0.25s ease-in-out; |
|
opacity:0; |
|
@keyframes flap{ |
|
from{ |
|
transform:rotate(-20deg); |
|
} |
|
to{ |
|
transform:rotate(30deg); |
|
} |
|
} |
|
|
|
} |
|
&:after{ |
|
animation-delay:0.02s; |
|
} |
|
&:nth-of-type(2n){ |
|
&:after, &:before{ |
|
animation-delay:-0.35s; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
} |
|
form{ |
|
position:relative; |
|
height:70px; |
|
width:100%; |
|
display:inline-block; |
|
z-index:9; |
|
input[type="email"]{ |
|
max-height:70px; |
|
height:70px; |
|
width:calc(100% - 50px); |
|
padding:0 0 0 50px; |
|
border-radius:80px; |
|
box-sizing:border-box; |
|
border:none; |
|
outline:none; |
|
font-size:16px; |
|
font-family:"Lato"; |
|
font-size:20px; |
|
font-weight:900; |
|
background:#fff; |
|
box-shadow:inset 0 0 0 2px var(--orange); |
|
transition:transform 0.3s ease-in-out; |
|
transition-delay:0.5s; |
|
transform-origin:right; |
|
&::placeholder{ |
|
color:#ccc; |
|
font-weight:100; |
|
} |
|
} |
|
.btnwrap{ |
|
display:inline-block; |
|
width:auto; |
|
height:auto; |
|
position:absolute; |
|
right:0; |
|
top:0; |
|
.spark{ |
|
position:absolute; |
|
width:15px; |
|
height:3px; |
|
background:linear-gradient(to right, var(--orange), var(--orange), var(--orange)); |
|
top:-25px; |
|
border-radius:100px; |
|
right:10px; |
|
transform:rotate(45deg) scale(0); |
|
&: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:var(--orange); |
|
top:calc(50% - 7.5px); |
|
left:calc(50% - 1.5px); |
|
border-radius:inherit; |
|
} |
|
} |
|
.btn{ |
|
position:absolute; |
|
color:#fff; |
|
width:100%; |
|
height:100%; |
|
display:flex; |
|
justify-content:center; |
|
align-items:center; |
|
font-family:"Lato"; |
|
letter-spacing:1px; |
|
z-index:999; |
|
font-size:20px; |
|
pointer-events:none; |
|
transition:0.5s ease-in-out; |
|
.inner{ |
|
content:''; |
|
position:absolute; |
|
width:calc(100% + 60px); |
|
height:100%; |
|
background:linear-gradient(to bottom, var(--orange) -50%, var(--pink), var(--orange) 150%); |
|
background-size:100% 600%; |
|
background-position:center; |
|
z-index:-1; |
|
left:-20px; |
|
border-radius:0 80px 80px 0; |
|
box-shadow:inset 0 0 0 2px var(--orange); |
|
overflow:hidden; |
|
transition:opacity 0.3s ease-in-out, background-size 0.2s ease-in-out; |
|
transform-origin:0% 150%; |
|
opacity:1; |
|
&:after{ |
|
content:''; |
|
position:absolute; |
|
width:25px; |
|
height:15px; |
|
background:var(--orange); |
|
box-shadow:inset -3px 0px 0 2px rgba(0,0,0,0.25); |
|
z-index:5; |
|
left:0; |
|
top:calc(50% - 7.5px); |
|
border-radius:0 50px 50px 0; |
|
transition:0.2s ease-in-out; |
|
transform-origin:left; |
|
transform:scaleX(0); |
|
} |
|
&:before{ |
|
content:'Subscribe'; |
|
position:absolute; |
|
left:50%; |
|
top:50%; |
|
opacity:1; |
|
transition:0.2s ease-in-out; |
|
transform:translateX(-50%) translateY(-50%); |
|
} |
|
.hive{ |
|
position:absolute; |
|
width:15%; |
|
left:0; |
|
height:100%; |
|
opacity:1; |
|
top:50%; |
|
transform:translateY(-50%); |
|
transition:0.2s ease-in-out; |
|
@for $i from 1 through 12{ |
|
&:nth-of-type(#{$i}){ |
|
left:#{($i - 1) * 6.25%}; |
|
box-shadow:inset 0 2px 0 0 var(--orange), inset 0 -2px 0 0 var(--orange), inset 0px 0 0 0 var(--orange); |
|
border-radius:0px; |
|
z-index:-1; |
|
&:before{ |
|
content:''; |
|
position:absolute; |
|
width:100%; |
|
height:100%; |
|
left:0; |
|
top:0; |
|
background:linear-gradient(to bottom, var(--orange) -50%, var(--pink), var(--orange) 150%); |
|
opacity:0; |
|
transition:0.3s; |
|
} |
|
} |
|
&:first-of-type{ |
|
box-shadow:inset 0 2px 0 0 var(--orange), inset 0 -2px 0 0 var(--orange), inset 2px 0 0 0 var(--orange); |
|
} |
|
&:last-of-type{ |
|
&:before{ |
|
content:''; |
|
position:absolute; |
|
width:100%; |
|
height:calc(100% - 4px); |
|
top:2px; |
|
background:linear-gradient(to bottom, var(--orange) -50%, var(--pink), var(--orange) 150%); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
input[type="submit"]{ |
|
height:70px; |
|
border-radius:80px; |
|
padding:0 30px; |
|
border:none; |
|
opacity:0; |
|
|
|
} |
|
} |
|
|
|
} |
|
|
|
} |