HTML
<div class="card">
<div class="thumbnail"></div>
<h1></h1>
<p></p>
</div>CSS
*,
*:before,
*:after{
padding:0;
margin:0;
box-sizing:border-box;
}
body{
background-color:#5050fe;
}
.card{
height:200px;
width:500px;
background-color:#ffffff;
position:absolute;
transform:translate(-50%,-50%);
top:50%;
left:50%;
border-radius:8px;
box-shadow:0 15px 25px rgba(0,0,0,0.2);
padding:20px 30px;
}
.thumbnail{
position:relative;
float:left;
height:100%;
width:36%;
background-color:#e5e5e5;
border-radius:50%;
}
h1{
background-color:#e5e5e5;
width:40%;
height:30px;
float:right;
margin:5px 65px 0 0;
}
p{
background-color:#e5e5e5;
width:55%;
height:95px;
float:right;
margin-top:20px;
}
.card *{
background:linear-gradient(
120deg,
#e5e5e5 30%,
#f0f0f0 38%,
#f0f0f0 40%,
#e5e5e5 48%
);
background-size:200% 100%;
background-position:100% 0;
animation:load 2s infinite;
}
@keyframes load{
100%{
background-position:-100%;
}
}
/* All credits to: https://www.youtube.com/watch?v=-GlIQe7rnQM */
Deja tu comentario