Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created February 10, 2020 23:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeMyUI/a3ab7e3572652511a9c797dd81f8cb6f to your computer and use it in GitHub Desktop.
Save CodeMyUI/a3ab7e3572652511a9c797dd81f8cb6f to your computer and use it in GitHub Desktop.
The handbook download animation
<div class="container">
<div class="box box-1">
<div class="cover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/945546/3433202-893bc9989a52eba0.png" alt=""></div>
<button><div></div></button>
</div>
<div class="box box-2">
<div class="cover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/945546/3433202-964edcf0f07211b0.png" alt=""></div>
<button><div></div></button>
</div>
<div class="box box-3">
<div class="cover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/945546/3433202-2ebb2b6f93add843.png" alt=""></div>
<button><div></div></button>
</div>
<div class="box box-4">
<div class="cover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/945546/3433202-f79c4cc8de2f84ae.png" alt=""></div>
<button><div></div></button>
</div>
</div>
<a href="https://dribbble.com/YancyMin" class="dr-url" target="_blank"><img class="dr" src="https://cdn.dribbble.com/assets/logo-footer-hd-a05db77841b4b27c0bf23ec1378e97c988190dfe7d26e32e1faea7269f9e001b.png" alt=""></a>
body,
ol,
ul,
h1,
h2,
h3,
h4,
h5,
h6,
p,
th,
td,
dl,
dd,
form,
fieldset,
legend,
input,
textarea,
i,
select {
margin: 0;
padding: 0;
}
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #2C3138;
-webkit-perspective: 90rem;
perspective: 90rem;
-webkit-perspective-origin: 34% 61%;
perspective-origin: 34% 61%;
}
img {
width: 160px;
}
button {
cursor: pointer;
outline: 0;
width: 180px;
height: 48px;
border-radius: 8px;
background-color: #2C3138;
margin-top: 40px;
overflow: hidden;
-webkit-transform: scale(.7);
transform: scale(.7);
}
button::after {
content: "";
position: relative;
top: -40px;
display: block;
width: 48px;
height: 107%;
background-color: #000;
margin-top: -1px;
margin-left: -7px;
border-radius: 6px 0 0 6px;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTRweCIgaGVpZ2h0PSIxN3B4IiB2aWV3Qm94PSIwIDAgMTQgMTciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUxLjEgKDU3NTAxKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJEZXNrdG9wLUhELUNvcHktMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYwOS4wMDAwMDAsIC0xMDA4LjAwMDAwMCkiIGZpbGw9IiNGOUZDRkYiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxnIGlkPSJHcm91cC0xMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTQ3LjAwMDAwMCwgNDk5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTYtQ29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDYuMDAwMDAwLCA0OTUuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImljX2ZpbGVfZG93bmxvYWRfYmxhY2tfMjRweC0oMSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2LjAwMDAwMCwgOC4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE0LDEyIEwxMCwxMiBMMTAsNiBMNCw2IEw0LDEyIEwwLDEyIEw3LDE5IEwxNCwxMiBaIE0wLDIxIEwwLDIzIEwxNCwyMyBMMTQsMjEgTDAsMjEgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
background-repeat: no-repeat;
background-position: center;
}
button::before {
content: "";
display: block;
width: 48px;
height: 46px;
margin-left: -7px;
margin-top: -1px;
-webkit-transition: all 200ms cubic-bezier(0.25, 0.75, 0.5, 1.25);
transition: all 200ms cubic-bezier(0.25, 0.75, 0.5, 1.25);
}
.box-1:hover button::before {
width: 120%;
opacity: .8;
background-color: #00BF9C;
}
.box-2:hover button::before {
width: 120%;
opacity: .8;
background-color: #653EE6;
}
.box-3:hover button::before {
width: 120%;
opacity: .8;
background-color: #008BFF;
}
.box-4:hover button::before {
width: 120%;
opacity: .8;
background-color: #FF6500;
}
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: distribute;
justify-content: space-around;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 80vw;
height: 100vh;
margin-left: 6vw;
/* transform:rotateX(7deg) rotateZ(-4deg) rotateY(13deg) scale3d(1, 1, -0.9); */
-webkit-transform: rotateX(23deg) rotateZ(-9deg) rotateY(15deg) scale3d(1, 1, -0.9);
transform: rotateX(23deg) rotateZ(-9deg) rotateY(15deg) scale3d(1, 1, -0.9);
}
.box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
will-change: transform;
}
.box:hover .cover {
-webkit-transform: translateY(-14px) scale(1.04);
transform: translateY(-14px) scale(1.04);
}
.box-1 button {
border: 1px solid #00BF9C;
color: #fff;
font-size: 22px;
text-align: right;
padding-right: 20px;
line-height: 40px;
}
.box-1 button::after {
content: "";
background-color: #00BF9C;
top: -85px
}
.box-2 button {
border: 1px solid #653EE6;
color: #fff;
font-size: 22px;
text-align: right;
padding-right: 20px;
line-height: 40px;
}
.box-2 button::after {
content: "";
background-color: #653EE6;
top: -85px
}
.box-3 button {
border: 1px solid #008BFF;
color: #fff;
font-size: 22px;
text-align: right;
padding-right: 20px;
line-height: 40px;
}
.box-3 button::after {
content: "";
background-color: #008BFF;
top: -85px
}
.box-4 button {
border: 1px solid #FF6500;
color: #fff;
font-size: 22px;
text-align: right;
padding-right: 20px;
line-height: 40px;
}
.box-4 button::after {
content: "";
background-color: #FF6500;
top: -85px
}
.cover {
-webkit-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
will-change: transform;
}
.cover img {
-webkit-transition: all 260ms ease-in-out;
transition: all 260ms ease-in-out;
}
.box .cover::after {
content: "";
z-index: -99;
position: absolute;
top: 20px;
left: -20px;
display: block;
width: 160px;
height: 214px;
opacity: 0;
background-position: center;
background-repeat: no-repeat;
background-size: 160px 214px;
-webkit-filter: blur(24px);
filter: blur(24px);
-webkit-transition: all 260ms ease-in-out;
transition: all 260ms ease-in-out;
will-change: transform;
-webkit-transform: scale(.6);
transform: scale(.6);
}
.box:hover .cover::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.box-1 .cover::after {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/945546/3433202-893bc9989a52eba0.png');
}
.box-2 .cover::after {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/945546/3433202-964edcf0f07211b0.png');
}
.box-3 .cover::after {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/945546/3433202-2ebb2b6f93add843.png');
}
.box-4 .cover::after {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/945546/3433202-f79c4cc8de2f84ae.png');
}
.box-1 button div::before {
content: 'Sensebot';
position: relative;
top: -44px;
left: -4px;
color: #00BF9C;
font-size: 21px;
font-weight: 300;
}
.box-1:hover button div::before {
color: #fff;
}
.box-2 button div::before {
content: 'OnePass';
position: relative;
top: -44px;
left: -6px;
color: rgb(154, 123, 255);
font-size: 21px;
font-weight: 300;
}
.box-2:hover button div::before {
color: #fff;
}
.box-3 button div::before {
content: 'DeepKnow';
position: relative;
top: -44px;
left: 3px;
color: #008BFF;
font-size: 21px;
font-weight: 300;
}
.box-3:hover button div::before {
color: #fff;
}
.box-4 button div::before {
content: 'Scanner';
position: relative;
top: -44px;
left: -9px;
color: #FF6500;
font-size: 21px;
font-weight: 300;
}
.box-4:hover button div::before {
color: #fff;
}
.dr {
position: absolute;
bottom: 16px;
right: 16px;
width:100px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment