$pink: #F75A7B;
$white: #fff;
$txtClr: #fff;
$bounceInnerDeg: 15deg;
$bounceInnerHeadingDeg: 20deg;
$bounceInnerTime: 750ms;
$bounceBtnInnerTime: 650ms;
$bounceHeadingTime: 875ms;
$slideOutInnerTime: 500ms;
$scaleInBtnOuterTime: 650ms;
$scaleInBtnOuterDelay: $slideOutInnerTime + 910;
$heartsBgSpeed: 120s;
$heartsInnerSpeed: 1500ms;
$heartsNumBg: 50; // Change this variable also in JS
$heartsNumInner: 25; // Change this variable also in JS
$btnDiam: 75px;
$btnRad: ($btnDiam / 2) + 20px;
$particle-d--outer: 10px;
$particle-d--inner: 12px;
$particle-r: $particle-d--outer * .5;
$particle-out-clr: rgba($pink, .6);
$particle-in-clr: $white;
$particles-inner-an-spd: 1150ms;
$particles-outer-an-spd: 2000ms;
$particles-bezier--outer: cubic-bezier(.83,.44,.4,.86);
$particles-bezier--inner: cubic-bezier(.18,.47,.72,.76);
@mixin particles($l, $clr, $diam) {
$particles-list: ();
$group-num: 9;
$group-base-angle: 360deg / $group-num;
$group-distr-r: (1 + $l * .25) * $btnRad;
$particles-in-group: 9;
$particle-base-angle: 360deg / $particles-in-group;
$particle-off-angle: 60deg;
$spread-r: -$l * ($diam * .5);
@for $i from 0 to $group-num {
$group-curr-angle: $i * $group-base-angle - 90deg;
$xg: $group-distr-r*cos($group-curr-angle);
$yg: $group-distr-r*sin($group-curr-angle);
@for $k from 0 to $particles-in-group {
$particles-curr-angle: $group-curr-angle + $particle-off-angle + $k*$particle-base-angle;
$xs: $xg + $diam*cos($particles-curr-angle);
$ys: $yg + $diam*sin($particles-curr-angle);
$particles-list: $particles-list, $xs $ys 1px $spread-r $clr;
}
}
box-shadow: $particles-list;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
.container {
height: 100vh;
font-family: 'Indie Flower', cursive;
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/codepen-logo.png');
overflow: hidden;
}
.box {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 80%;
height: 80%;
perspective: 2000px;
z-index: 1;
&__inner {
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
border-radius: 25px;
background-color: $pink;
box-shadow: 0 0 3px 1px $pink;
transform: translate3d(0, 0, 0) rotateY(30deg);
will-change: transform;
opacity: 0;
z-index: -1;
transition: z-index 0ms 500ms;
&-heading {
text-align: center;
text-transform: uppercase;
letter-spacing: 5px;
color: $txtClr;
family: 'Indie Flower', cursive;
font: {
size: 45px;
weight: 300;
}
text-shadow: 0 0 1px $txtClr;
span {
font: {
weight: 600;
}
text-shadow: 0 0 2px $txtClr;
}
}
&-wrapper {
position: relative;
}
&-hearts {
position: absolute;
top: 20px;
left: -2%;
width: 92%;
}
}
&__outer {
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 20px;
transition: opacity 500ms 500ms;
&:after,
&:before {
content: '';
position: absolute;
top: 65%;
left: 50%;
width: 90px;
height: 1px;
background-color: #888;
transform: translateX(-165%);
}
&:before {
transform: translateX(165%);
left: initial;
right: 50%;
}
&-heading {
text-align: center;
padding-bottom: 30px;
font: {
size: 45px;
}
}
&-click {
margin-top: 10px;
font: {
size: 20px;
}
text-align: center;
}
&-logo {
position: absolute;
width: 65px;
height: 65px;
left: 50%;
transform: translate(-50%, 5px);
opacity: 0;
}
}
&__btn {
position: relative;
width: $btnDiam;
height: $btnDiam;
border-radius: 50%;
cursor: pointer;
transform: translate3d(0, 0, 0);
will-change: transform;
transition: 200ms;
.fa-heart-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: $white;
opacity: 1;
&--inner {
color: $pink;
}
}
}
&__btn--inner {
margin: 75px auto 0 auto;
&:after, &:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
border-radius: 50%;
}
&:after {
width: $particle-d--inner;
height: $particle-d--inner;
will-change: box-shadow, opacity;
@include particles(1, $white, $particle-d--inner);
}
&:before {
width: 100%;
height: 100%;
background-color: $white;
box-shadow: 0 0 1px $white, 0 7px 25px -1px #3c3c3c;
transition: 200ms;
}
&:hover:before {
background-color: $pink;
box-shadow: 0 0 1px 5px $white, 0 7px 25px -1px #3c3c3c;
}
&:hover .fa-heart-btn--inner {
color: $white;
}
}
&__btn--outer {
position: relative;
transform: scale(0);
margin: auto;
&:after, &:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
border-radius: 50%;
}
&:after {
width: $particle-d--outer;
height: $particle-d--outer;
will-change: box-shadow, opacity;
@include particles(1, $particle-out-clr, $particle-d--outer);
}
&:before {
width: 100%;
height: 100%;
background-color: $pink;
box-shadow: 0 0 1px $pink, 0 5px 5px #ccc;
transition: 200ms;
}
&:hover:before {
background-color: $white;
box-shadow: 0 0 1px 5px $pink, 0 5px 5px #ccc;
}
&:hover .fa-heart-btn--outer {
color: $pink;
}
&-arrow {
border-color: transparent transparent transparent $white;
}
}
}
.show-in-inner {
z-index: 1;
transition: z-index 0ms 0ms;
animation: bounceInner $bounceInnerTime forwards;
@keyframes bounceInner {
16% {
transform: rotateY(-$bounceInnerDeg);
opacity: 1
}
32% {
transform: rotateY($bounceInnerDeg);
opacity: 1
}
50% {
transform: rotateY(-$bounceInnerDeg / 2);
opacity: 1
}
66% {
transform: rotateY($bounceInnerDeg / 4);
opacity: 1
}
83% {
transform: rotateY(-$bounceInnerDeg / 6);
opacity: 1
}
100% {
transform: rotateY(0deg);
opacity: 1
}
}
.box__btn--inner {
animation: bounceBtnInner $bounceBtnInnerTime forwards;
@keyframes bounceBtnInner {
25% {
transform: scale(1.20)
}
50% {
transform: scale(.90)
}
75% {
transform: scale(1.08)
}
100% {
transform: scale(1)
}
}
.fa-heart-btn--inner {
animation: scaleHeartInner $bounceBtnInnerTime + 200 forwards;
@keyframes scaleHeartInner {
25% {
transform: translate(-50%, -50%) scale(1.15)
}
50% {
transform: translate(-50%, -50%) scale(.98)
}
75% {
transform: translate(-50%, -50%) scale(1.02)
}
100% {
transform: translate(-50%, -50%) scale(1)
}
}
}
&:after {
animation: particles--inner $particles-inner-an-spd $particles-bezier--inner;
@keyframes particles--inner {
0%, 20% {opacity: 0}
25% {
opacity: 1;
@include particles(0, $particle-in-clr, $particle-d--inner);
}
}
}
}
.box__inner-heading {
animation: bounceHeadingInner $bounceHeadingTime forwards;
@keyframes bounceHeadingInner {
16% {
transform: scale(1.20) rotate($bounceInnerHeadingDeg)
}
32% {
transform: scale(.90) rotate(-$bounceInnerHeadingDeg / 2)
}
50% {
transform: scale(1.05) rotate($bounceInnerHeadingDeg / 4)
}
66% {
transform: scale(.975) rotate(-$bounceInnerHeadingDeg / 8)
}
83% {
transform: scale(1.012) rotate($bounceInnerHeadingDeg / 16)
}
100% {
transform: scale(1) rotate(0deg)
}
}
}
}
.show-out-outer {
z-index: -1;
opacity: 0;
transform: scale(0);
}
.slide-out-inner {
opacity: 1;
transform: rotateY(0deg);
//animation: slideOutInner $slideOutInnerTime forwards cubic-bezier(1, -0.03, .99, .78);
animation: slideOutInner $slideOutInnerTime forwards cubic-bezier(1,.06,.95,.68);
@keyframes slideOutInner {
75% {
opacity: 1;
}
100% {
transform: translate3d(0, 150%, 0);
opacity: 0;
}
}
}
.scale-in-btn-outer {
animation: scaleBtnOuter $scaleInBtnOuterTime / 2 $scaleInBtnOuterDelay forwards;
@keyframes scaleBtnOuter {
100% {
transform: scale(1)
}
}
.fa-heart-btn--outer {
animation: scaleHeartOuter 2500ms $scaleInBtnOuterDelay infinite;
@keyframes scaleHeartOuter {
16.666% {transform: translate(-50%, -50%) scale(1.1);
opacity: 1}
33.333% {transform: translate(-50%, -50%) scale(1);
opacity: 1}
50% {transform: translate(-50%, -50%) scale(1);
opacity: 1}
66.666% {transform: translate(-50%, -50%) scale(1.1);
opacity: 1}
83.666% {transform: translate(-50%, -50%) scale(1);
opacity: 1}
100% {transform: translate(-50%, -50%) scale(1);
opacity: 1}
}
}
&:after {
animation: particles--outer $particles-outer-an-spd $scaleInBtnOuterDelay - 250 $particles-bezier--outer;
@keyframes particles--outer {
0%, 20% { opacity: 0; }
25% {
opacity: 1;
@include particles(0, $particle-out-clr, $particle-d--outer);
}
}
}
}
.beat-logo {
animation: logo 1560ms forwards;
@keyframes logo {
16.666% {transform: translate(-50%, 5px) scale(1.1);
opacity: 1}
33.333% {transform: translate(-50%, 5px) scale(1);
opacity: 1}
50% {transform: translate(-50%, 5px) scale(1);
opacity: 1}
66.666% {transform: translate(-50%, 5px) scale(1.1);
opacity: 1}
83.666% {transform: translate(-50%, 5px) scale(1);
opacity: 1}
100% {transform: translate(-50%, 5px) scale(1);
opacity: 1}
}
}
.outer-ring {
fill: $pink;
}
.inner-box {
fill: $pink;
}
.icon-link {
position: absolute;
left: 5px;
bottom: 5px;
width: 50px;
img {
width: 100%;
vertical-align: top;
}
&--twitter {
left: auto;
right: 5px;
}
}
// *** Hearts ***
.fa-heart {
font: {
size: 30px;
}
color: $pink;
text-shadow: 0 0 1px $pink;
opacity: .15;
&--inner {
color: $white;
}
}
.heart {
position: absolute;
top: 0;
left: 0;
transform: translate3d(0, 0, 0);
z-index: 0;
}
// *** Hearts Bg ***
@for $i from 1 through $heartsNumBg {
.heart-bg-#{$i} {
top: percentage(random(100) / 100);
left: percentage(random(100) / 100);
animation: hearts-bg-#{$i} $heartsBgSpeed infinite alternate linear;
@keyframes hearts-bg-#{$i} {
0% {
transform: translate3d(0,0,0) rotate(0deg)
}
25% {
transform: translate3d(random(200) - 200 + px, random(200) - 200 + px, 0) rotate(360deg)
}
50% {
transform: translate3d(random(400) + px, random(400) + px, 0) rotate(720deg)
}
75% {
transform: translate3d(random(200) - 200 + px, random(200) - 200 + px, 0) rotate(1080deg)
}
100% {
transform: translate3d(random(400) + px, random(400) + px, 0) rotate(1440deg)
}
}
}
}
// *** Hearts Inner ***
@for $i from 1 through $heartsNumInner {
.heart-inner-#{$i} {
left: (100% / $heartsNumInner) * $i;
opacity: 0;
animation: hearts-inner-#{$i} $heartsInnerSpeed infinite linear;
animation-delay: random(5000) + ms;
@keyframes hearts-inner-#{$i} {
0% {transform: translate3d(0, 0, 0) rotate(0deg);
opacity: 0}
50% {transform: translate3d(-25px, 32px, 0) rotate(180deg);
opacity: .7}
100% {transform: translate3d(-50px, 75px, 0) rotate(360deg);
opacity: 0}
}
}
}
!
