33 lines
552 B
HTML
33 lines
552 B
HTML
<div id="pit"></div>
|
|
<style>
|
|
#pit {
|
|
width:25%;
|
|
height: 400px;
|
|
border-left: 2px solid #000000;
|
|
border-right: 2px solid #000000;
|
|
border-bottom: 2px solid #000000;
|
|
border-bottom-left-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
#pit::before {
|
|
content: '';
|
|
position: absolute;
|
|
background: #04ACFF;
|
|
width: 100%;
|
|
bottom: 0;
|
|
animation: wipe 1s cubic-bezier(.2,.6,.8,.4) forwards;
|
|
}
|
|
@keyframes wipe {
|
|
0% {
|
|
height: 0;
|
|
}
|
|
100% {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|