<html lang="en">
<head>
<title>CS:GO Case Opening Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<button type="button" id="openCase" class="btn btn-info copenbtn"> OPEN </button>
<div class="container-fluid caseOpeningArea">
<div class="row">
<div class="container animationAreaItems">
<div class="row">
<div class="row text-center flex-nowrap mx-auto">
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div id="itemBoxAn itemBoxAnW" class="itemBoxAn itemBoxAnW"><img src="skins/Karambit Gold.webp" alt=""> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
<div class="itemBoxAn"> </div>
</div>
</div>
</div>
</div>
</div>
<div id="test"></div>
</div>
</div>
</body>
</html>body {
/*background: grey;*/
background-repeat: no-repeat;
background-size: cover;
min-height: 100%;
height: 100% !important;
}
#test{
width: 100px;
height: 80px;
color: orange;
margin: 0 auto;
display:block;
background: orange;
}
#openCase {
float: none;
margin: 0 auto;
margin-top: 20px;
}
.copenbtn:focus, .copenbtn:active {
outline: none !important;
box-shadow: none !important;
}
.caseOpeningArea {
margin-top: 20px;
}
.itemBoxAn {
border-radius: 0px !important;
border: none !important;
margin-left: 3px;
margin-top: 5px;
width: 150px;
height: 165px;
background: cyan !important;
position: relative;
}
.itemBoxAnW {
border-radius: 0px !important;
border: none !important;
margin-left: 3px;
margin-top: 5px;
width: 150px;
height: 165px;
position: relative;
background: black !important;
}
.itemBoxAnW img{
width: 150px;
height: 165px;
position: relative;
}
.animationAreaItems {
width: 100%;
min-height: 180px;
max-height: 180px;
height: 180px !important;
position: relative;
text-align: center;
display: inline-block;
overflow: hidden;
white-space: nowrap;
border: 2px solid red;
}
.animationAreaItems:before {
content: "";
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 48%;
border-style: solid;
border-width: 0 20px 20px 20px;
border-color: transparent transparent #ff0000 transparent;
}
.animationAreaItems:after {
content: "";
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 48%;
border-style: solid;
border-width: 20px 20px 0 20px;
border-color: #ff0000 transparent transparent transparent;
}
External CSS
This Pen doesn't use any external CSS resources.