practice css_falling_banner

<!DOCTYPE html>
<html>
<head>
<style>

.falling-banner{
position:absolute;
top:100px;
width:250px;
height:150px;
background-color:lightblue;  
-webkit-animation:fallingBanner 1s 1;
}

.string{
display:block; 
width:10%;
height:10%;
border-top-left-radius:50%;
border-top-right-radius:50%;
border:2px solid red;
margin:auto;
border-bottom:none;
}
.nail{
width:15px;
height:15px;
border-radius:50%;
background-color:black;
box-shadow:1px 1px 2px 0px rgba(200,200,200,0.5);
position:absolute;
top:100px;  /* same as .falling-banner value */
left:126px; /* half of widht of .falling-banner =250px/2 */
z-index:1000;
}  
  
.perspective-container{
width:100%;
height:100%;
background-color:rgb(210,210,210);
border-radius:10px;
perspective: 400px;
}
.vibrating-box{
width:100%;
height:100%;
background-color:red;
color:white;
border-radius:10px;
transform:rotateX(0deg);
transform-origin:top;
-webkit-animation:vibratingBox 2s 1;
-webkit-animation-delay:1s;
box-shadow:3px 3px 2px 0px rgba(210,210,210,1);
}

@-webkit-keyframes vibratingBox{
0%{
	transform:rotateX(50deg);
    -webkit-transform:rotateX(50deg); 
}
12.5%{
	transform:rotateX(0deg);
    -webkit-transform:rotateX(0deg); 
}
25%{
	transform:rotateX(37.5deg);
    -webkit-transform:rotateX(37.5deg);
}
37.5%{
	transform:rotateX(0deg);
    -webkit-transform:rotateX(0deg);
}
50%{
	transform:rotateX(28.125deg);
    -webkit-transform:rotateX(28.125deg);
}
62.5%{
	transform:rotateX(0deg);
    -webkit-transform:rotateX(0deg);  
}
75%{
	-webkit-transform:rotateX(21deg);
	-webkit-animation-timing-function:ease-in;
}
100%{
	-webkit-transform:rotateX(0deg);
}

}
  
@-webkit-keyframes fallingBanner{
0%{
 top:-300px;
 -webkit-animation-timing-function:ease-in;
}
100%{
 top:100px;
}
}
  
  
</style>
</head>
<body>
    <span class="nail"></span> 
<div class="falling-banner">
  <span class="string"></span>
  <div class="perspective-container">
    <div class="vibrating-box">
    </div>
  </div>
</div>

</body>
</html>

Share