Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created June 9, 2021 12:48
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeMyUI/5cab134b5747465c1b307cbb0df31d50 to your computer and use it in GitHub Desktop.
Save CodeMyUI/5cab134b5747465c1b307cbb0df31d50 to your computer and use it in GitHub Desktop.
Download ZIP
Movie Ticket Animation - Loop 23
Raw
index.html
<body>
<div class="hero-container">
<div class="main-container">
<div class="poster-container">
<a href="#"><img src="https://i.ibb.co/ThPNnzM/blade-runner.jpg" class="poster" /></a>
</div>
<div class="ticket-container">
<div class="ticket__content">
<h4 class="ticket__movie-title">Blade Runner 2049</h4>
<p class="ticket__movie-slogan">
More human than human is our motto.
</p>
<p class="ticket__current-price">$28.00</p>
<p class="ticket__old-price">$44.99</p>
<button class="ticket__buy-btn">Buy now</button>
</div>
</div>
</div>
<div class="main-container">
<div class="poster-container">
<a href="#"><img src="https://i.ibb.co/Zd51z5c/justice-league.jpg" class="poster" /></a>
</div>
<div class="ticket-container">
<div class="ticket__content">
<h4 class="ticket__movie-title">Justice League</h4>
<p class="ticket__movie-slogan">You can't save the world alone.</p>
<p class="ticket__current-price">$20.75</p>
<p class="ticket__old-price">$40.99</p>
<button class="ticket__buy-btn">Buy now</button>
</div>
</div>
</div>
</div>
</body>
Raw
movie-ticket-animation-loop-23.markdown
Raw
style.css
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap");
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background: #457fb4;
font-family: "Roboto", sans-serif;
display: flex;
height: 100vh;
}
.hero-container {
margin: auto;
display: flex;
}
.main-container {
width: 270px;
height: 540px;
position: relative;
margin: 0 20px;
}
.poster-container {
width: 230px;
position: absolute;
top: 0;
left: 20px;
z-index: 9999;
}
.poster {
width: 100%;
box-shadow: 0 5px 20px 3px rgba(0, 0, 0, 0.6);
}
.ticket-container {
background: #fff;
width: 270px;
height: 520px;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 5px;
position: absolute;
top: 20px;
box-shadow: 0 5px 20px 3px rgba(0, 0, 0, 0.6);
opacity: 0;
}
.main-container:hover .ticket-container {
opacity: 1;
animation: bounceIn 0.6s linear;
}
@keyframes bounceIn {
0%,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.01, 1.01, 1.01);
transform: scale3d(1.01, 1.01, 1.01);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
/* @keyframes bounce {
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
} */
.ticket__content {
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
}
.ticket__movie-title {
text-transform: uppercase;
margin-bottom: 5px;
}
.ticket__movie-slogan {
color: #999;
font-size: 0.9rem;
margin-bottom: 20px;
}
.ticket__current-price {
color: #69c982;
font-size: 1.4rem;
font-weight: bold;
}
.ticket__old-price {
color: #999;
text-decoration: line-through;
margin-bottom: 10px;
}
.ticket__buy-btn {
cursor: pointer;
width: 100%;
background: #2f2f2f;
color: white;
padding: 15px 0;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
border: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment