Blobby: It appears, wobbles, changes its shape and disappears again. Just like that.
Project Structure
The project consists of 2 main files:
- index.html - the HTML structure.
- style.css - for styling.
HTML Structure
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere erat at mi sagittis ultricies. Aenean cursus libero vitae odio congue volutpat.
<div class="frame">
<div id="profile-1" class="profile">
<img src="https://100dayscss.com/codepen/13-1.jpg" alt="a profile image">
<div class="overlay"></div>
<div class="plus"></div>
</div>
<div id="profile-2" class="profile">
<img src="https://100dayscss.com/codepen/13-2.jpg" alt="a profile image">
<div class="overlay"></div>
<div class="plus"></div>
</div>
<div id="profile-3" class="profile">
<img src="https://100dayscss.com/codepen/13-3.jpg" alt="a profile image">
<div class="overlay"></div>
<div class="plus"></div>
</div>
<div id="profile-4" class="profile">
<img src="https://100dayscss.com/codepen/13-4.jpg" alt="a profile image">
<div class="overlay"></div>
<div class="plus"></div>
</div>
<div id="detail-1" class="detail">
<div class="close"></div>
<img class="header" src="https://100dayscss.com/codepen/13-1-header.jpg" />
<div class="image">
<img src="https://100dayscss.com/codepen/13-1.jpg" />
</div>
<div class="info">
<div class="name">Julia Toth</div>
<div class="action">
<button class="btn">
<span class="fa fa-phone"></span>
</button>
<button class="btn">
<span class="fa fa-comment"</span>
</button>
<button class="btn">
<span class="fa fa-heart"></span>
</button>
</div>
</div>
</div>
</div>
</div>CSS Styling
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere erat at mi sagittis ultricies. Aenean cursus libero vitae odio congue volutpat.
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 1px 2px 10px 0 rgba(0,0,0,0.3);
overflow: hidden;
background: #46A6DA;
font-family: 'Open Sans', Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.blobb {
position: absolute;
width: 90px;
height: 90px;
top: 155px;
left: 155px;
background: #fff;
border-radius: 50%;
animation: blobby 5s ease-in-out infinite;
}
.blobb-ring {
box-sizing: border-box;
position: absolute;
width: 110px;
height: 110px;
top: 145px;
left: 145px;
border: 3px solid #fff;
border-radius: 50%;
animation: blobby-ring 5s ease-in-out infinite;
}
.octagon {
position: absolute;
width: 100px;
height: 100px;
top: 150px;
left: 150px;
fill: #fff;
animation: octa 5s ease-in-out infinite;
}
.octa-sparkles {
position: absolute;
width: 200px;
height: 200px;
top: 100px;
left: 100px;
animation: octa-sparkle 5s ease-in-out infinite;
.sparkle {
position: absolute;
top: 0px;
left: 98px;
width: 4px;
height: 200px;
&:before, &:after {
display: block;
content: '';
position: absolute;
width: 4px;
height: 25px;
top: 0;
left: 0;
border-radius: 2px;
background: #fff;
}
&:after {
top: auto;
bottom: 0;
}
}
.s2 {
transform: rotate(45deg);
}
.s3 {
transform: rotate(90deg);
}
.s4 {
transform: rotate(135deg);
}
}
.triangle {
position: absolute;
width: 106px;
height:90px;
top: 145px;
left: 147px;
fill: #fff;
animation: triangle 5s ease-in-out infinite;
}
.triangle-sparkles {
position: absolute;
width: 200px;
height: 200px;
top: 100px;
left: 100px;
animation: triangle-sparkle 5s ease-in-out infinite;
.sparkle {
position: absolute;
top: 0px;
left: 98px;
width: 4px;
height: 200px;
&:before, &:after {
display: block;
content: '';
position: absolute;
width: 4px;
height: 25px;
top: 0;
left: 0;
border-radius: 2px;
background: #fff;
}
}
.s1 {
top: 10px;
}
.s2 {
transform: rotate(124deg);
}
.s3 {
transform: rotate(237deg);
}
}
@keyframes blobby {
0% {
transform: translate3d(0,-300px,0)scaleY(1.2);
}
10% {
transform: translate3d(0,50px,0)scaleY(0.8);
}
14% {
transform: translate3d(0,-30px,0)scaleY(1.1);
}
18% {
transform: translate3d(0,10px,0)scaleY(0.9);
}
20%, 22% {
transform: translate3d(0,0,0)scaleY(1);
}
26% {
transform: translate3d(0,0,0)scaleY(1.2);
}
32%, 74% {
transform: translate3d(0,0,0)scaleY(0);
}
80% {
transform: translate3d(0,0,0)scaleY(1.2);
}
84% {
transform: translate3d(0,0,0)scaleY(0.9);
}
86%, 88% {
transform: translate3d(0,0,0)scaleY(1);
}
92% {
transform: translate3d(0,-30px,0)scaleY(0.9);
}
100% {
transform: translate3d(0,300px,0)scaleY(1.2);
}
}
@keyframes blobby-ring {
0%, 74% {
transform: translate3d(0,0,0) scale(0);
opacity: 1;
}
80% {
opacity: 1;
}
84%, 100% {
transform: translate3d(0,0,0) scale(1.4);
opacity: 0;
}
}
@keyframes octa {
0%, 30% {
transform: translate3d(0,0,0) scale(0) rotate(22.5deg);
}
36% {
transform: translate3d(0,0,0) scale(1.2) rotate(22.5deg);
}
40% {
transform: translate3d(0,0,0) scale(0.9) rotate(22.5deg);
}
42%, 44% {
transform: translate3d(0,0,0) scale(1) rotate(22.5deg);
}
48% {
transform: translate3d(0,0,0) scale(1.2) rotate(22.5deg);
}
54%, 100% {
transform: translate3d(0,0,0) scale(0) rotate(22.5deg);
}
}
@keyframes octa-sparkle {
0%, 30% {
transform: translate3d(0,0,0) scale(0);
opacity: 1;
}
36% {
opacity: 1;
}
40%, 100% {
transform: translate3d(0,0,0) scale(1.4);
opacity: 0;
}
}
@keyframes triangle {
0%, 52% {
transform: translate3d(0,0,0) scale(0);
}
58% {
transform: translate3d(0,0,0) scale(1.2);
}
62% {
transform: translate3d(0,0,0) scale(0.9);
}
64%, 66% {
transform: translate3d(0,0,0) scale(1);
}
70% {
transform: translate3d(0,0,0) scale(1.2);
}
76%, 100% {
transform: translate3d(0,0,0) scale(0);
}
}
@keyframes triangle-sparkle {
0%, 52% {
transform: translate3d(0,0,0) scale(0);
opacity: 1;
}
58% {
opacity: 1;
}
62%, 100% {
transform: translate3d(0,0,0) scale(1.4);
opacity: 0;
}
}