<div class="container">
<div class="box">
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg"><symbol id="codepen-logo" viewBox="0 0 120 120"><path class="outer-ring" d="M60.048 0C26.884 0 0 26.9 0 60.048s26.884 60 60 60.047c33.163 0 60.047-26.883 60.047-60.047 S93.211 0 60 0z M60.048 110.233c-27.673 0-50.186-22.514-50.186-50.186S32.375 9.9 60 9.9 c27.672 0 50.2 22.5 50.2 50.186S87.72 110.2 60 110.233z"/><path class="inner-box" d="M97.147 48.319c-0.007-0.047-0.019-0.092-0.026-0.139c-0.016-0.09-0.032-0.18-0.056-0.268 c-0.014-0.053-0.033-0.104-0.05-0.154c-0.025-0.078-0.051-0.156-0.082-0.232c-0.021-0.053-0.047-0.105-0.071-0.156 c-0.033-0.072-0.068-0.143-0.108-0.211c-0.029-0.051-0.061-0.1-0.091-0.148c-0.043-0.066-0.087-0.131-0.135-0.193 c-0.035-0.047-0.072-0.094-0.109-0.139c-0.051-0.059-0.104-0.117-0.159-0.172c-0.042-0.043-0.083-0.086-0.127-0.125 c-0.059-0.053-0.119-0.104-0.181-0.152c-0.048-0.037-0.095-0.074-0.145-0.109c-0.019-0.012-0.035-0.027-0.053-0.039L61.817 23.5 c-1.072-0.715-2.468-0.715-3.54 0L24.34 46.081c-0.018 0.012-0.034 0.027-0.053 0.039c-0.05 0.035-0.097 0.072-0.144 0.1 c-0.062 0.049-0.123 0.1-0.181 0.152c-0.045 0.039-0.086 0.082-0.128 0.125c-0.056 0.055-0.108 0.113-0.158 0.2 c-0.038 0.045-0.075 0.092-0.11 0.139c-0.047 0.062-0.092 0.127-0.134 0.193c-0.032 0.049-0.062 0.098-0.092 0.1 c-0.039 0.068-0.074 0.139-0.108 0.211c-0.024 0.051-0.05 0.104-0.071 0.156c-0.031 0.076-0.057 0.154-0.082 0.2 c-0.017 0.051-0.035 0.102-0.05 0.154c-0.023 0.088-0.039 0.178-0.056 0.268c-0.008 0.047-0.02 0.092-0.025 0.1 c-0.019 0.137-0.029 0.275-0.029 0.416V71.36c0 0.1 0 0.3 0 0.418c0.006 0 0 0.1 0 0.1 c0.017 0.1 0 0.2 0.1 0.268c0.015 0.1 0 0.1 0.1 0.154c0.025 0.1 0.1 0.2 0.1 0.2 c0.021 0.1 0 0.1 0.1 0.154c0.034 0.1 0.1 0.1 0.1 0.213c0.029 0 0.1 0.1 0.1 0.1 c0.042 0.1 0.1 0.1 0.1 0.193c0.035 0 0.1 0.1 0.1 0.139c0.05 0.1 0.1 0.1 0.2 0.2 c0.042 0 0.1 0.1 0.1 0.125c0.058 0.1 0.1 0.1 0.2 0.152c0.047 0 0.1 0.1 0.1 0.1 c0.019 0 0 0 0.1 0.039L58.277 96.64c0.536 0.4 1.2 0.5 1.8 0.537c0.616 0 1.233-0.18 1.77-0.537 l33.938-22.625c0.018-0.012 0.034-0.027 0.053-0.039c0.05-0.035 0.097-0.072 0.145-0.109c0.062-0.049 0.122-0.1 0.181-0.152 c0.044-0.039 0.085-0.082 0.127-0.125c0.056-0.055 0.108-0.113 0.159-0.172c0.037-0.045 0.074-0.09 0.109-0.139 c0.048-0.062 0.092-0.127 0.135-0.193c0.03-0.049 0.062-0.098 0.091-0.146c0.04-0.07 0.075-0.141 0.108-0.213 c0.024-0.051 0.05-0.102 0.071-0.154c0.031-0.078 0.057-0.156 0.082-0.234c0.017-0.051 0.036-0.102 0.05-0.154 c0.023-0.088 0.04-0.178 0.056-0.268c0.008-0.045 0.02-0.092 0.026-0.137c0.018-0.139 0.028-0.277 0.028-0.418V48.735 C97.176 48.6 97.2 48.5 97.1 48.319z M63.238 32.073l25.001 16.666L77.072 56.21l-13.834-9.254V32.073z M56.856 32.1 v14.883L43.023 56.21l-11.168-7.471L56.856 32.073z M29.301 54.708l7.983 5.34l-7.983 5.34V54.708z M56.856 88.022L31.855 71.4 l11.168-7.469l13.833 9.252V88.022z M60.048 67.597l-11.286-7.549l11.286-7.549l11.285 7.549L60.048 67.597z M63.238 88.022V73.14 l13.834-9.252l11.167 7.469L63.238 88.022z M90.794 65.388l-7.982-5.34l7.982-5.34V65.388z"/></symbol></svg>
<div class="box__inner">
<div class="box__inner-wrapper">
<h1 class="box__inner-heading">For <span>codepen</span> With Love</h1>
<div class="box__inner-hearts">
</div>
<div data-btn='inner' class="box__btn box__btn--inner">
<i class="fa fa-heart fa-heart-btn fa-heart-btn--inner" aria-hidden="true"></i>
</div>
</div>
</div>
<!-- box__inner end -->
<div class="box__outer">
<div class="box__outer-wrapper">
<h1 class="box__outer-heading">Made with Love</h1>
<svg class="box__outer-logo beat-logo">
<use xlink:href="#codepen-logo"></use>
</svg>
<div data-btn='outer' class="box__btn box__btn--outer scale-in-btn-outer">
<i class="fa fa-heart fa-heart-btn fa-heart-btn--outer" aria-hidden="true"></i>
</div>
<p class="box__outer-click">Click</p>
</div>
</div>
<!-- box__outer end -->
</div>
<a href="https://dribbble.com/shots/2897749-Hello-Dribbble" target="_blank" class="icon-link">
<img src="http://icons.iconarchive.com/icons/uiconstock/socialmedia/256/Dribbble-icon.png">
</a>
<a href="https://twitter.com/mrspok407" target="_blank" class="icon-link icon-link--twitter">
<img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-128.png">
</a>
</div>$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}
}
}
}$(document).ready(function() {
const $btnOuter = $('.box__btn--outer');
const $btnInner = $('.box__btn--inner');
const $inner = $('.box__inner');
const $outer = $('.box__outer');
const $logo = $('.box__outer-logo');
let slideOutInnerDelay = 650;
let animation = false;
let numOfHeartsBg = 50; // Change this variable also in CSS
let numOfHeartsInner = 25; // Change this variable also in CSS
$(document).on('click', '.box__btn--outer', function() {
if (animation) return;
animation = true;
$inner.addClass('show-in-inner');
$outer.addClass('show-out-outer');
setTimeout(function() {
$btnOuter.removeClass('scale-in-btn-outer');
$logo.removeClass('beat-logo');
animation = false;
}, 750)
});
$(document).on('click', '.box__btn--inner', function() {
if (animation) return;
$inner.removeClass('show-in-inner')
.addClass('slide-out-inner');
$outer.removeClass('show-out-outer');
setTimeout(function() {
$inner.removeClass('slide-out-inner');
$btnOuter.addClass('scale-in-btn-outer');
$logo.addClass('beat-logo');
animation = false;
}, slideOutInnerDelay)
});
//*** Hearts ***
let hearts = function() {
const docFragBg = $(document.createDocumentFragment());
const docFragInner = $(document.createDocumentFragment());
const $con = $('.container');
const $conInnerHearts = $('.box__inner-hearts');
for (var i = 1, l = 1; i <= numOfHeartsBg, l <= numOfHeartsInner; i++, l++) {
let heartBg = $(`<div class="heart heart-bg-${i}">
<i class="fa fa-heart" aria-hidden="true"></i>
</div>`);
let heartInner = $(`<div class="heart heart-inner-${l}">
<i class="fa fa-heart fa-heart--inner" aria-hidden="true"></i>
</div>`);
docFragBg.append(heartBg);
docFragInner.append(heartInner);
}
$con.append(docFragBg);
$conInnerHearts.append(docFragInner);
}
hearts();
});
External CSS
This Pen doesn't use any external CSS resources.