A Pen by Nothing_4us on CodePen.
Created
December 15, 2022 01:09
-
-
Save mihirksingh21/3456de7402732de253f8748b40a6c7f2 to your computer and use it in GitHub Desktop.
Product Card | Nothing4us
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en" > | |
<head> | |
<meta charset="UTF-8"> | |
<title> Product Card | Nothing4us </title> | |
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;900&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> | |
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'><link rel="stylesheet" href="./style.css"> | |
</head> | |
<body> | |
<!-- partial:index.partial.html --> | |
<div id='wrap'> | |
<input class='initial' type='checkbox'> | |
<input class='wheel1' name='wheel' type='radio'> | |
<input class='wheel2' name='wheel' type='radio'> | |
<input class='wheel3' name='wheel' type='radio'> | |
<input class='wheel4' name='wheel' type='radio'> | |
<input class='buy' type='checkbox'> | |
<h1>Configure the Bike</h1> | |
<h2>Added to Cart</h2> | |
<h3>Wheels</h3> | |
<div class='wheeltoggle'></div> | |
<div class='wheeltoggle'></div> | |
<div class='wheeltoggle'></div> | |
<div class='wheeltoggle'></div> | |
<div class='buy'></div> | |
<div class='toggle expand'> | |
<i class='fas fa-bicycle'></i> | |
</div> | |
<div class='toggle'> | |
<i class='fas fa-bicycle'></i> | |
</div> | |
<div class='background'></div> | |
<div class='frame'> | |
<div class='rear'></div> | |
<div class='stem'></div> | |
<div class='shaft'></div> | |
<div class='seat'></div> | |
<div class='wheel one front'> | |
<div class='inner'></div> | |
</div> | |
<div class='wheel one back'> | |
<div class='inner'></div> | |
</div> | |
</div> | |
</div> | |
<!-- partial --> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
display: grid; | |
place-items: center; | |
height: 100vh; | |
font-family: "Roboto"; | |
background: #180148; | |
} | |
body #wrap { | |
width: 800px; | |
height: 550px; | |
background: #efefef; | |
box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.25); | |
position: relative; | |
border-radius: 5px; | |
overflow: hidden; | |
display: grid; | |
grid-template-columns: repeat(15, 1fr); | |
grid-template-rows: repeat(15, 1fr); | |
grid-column-gap: 0px; | |
grid-row-gap: 0px; | |
} | |
body #wrap h1, | |
body #wrap h2 { | |
grid-area: 4/10/5/15; | |
color: #000; | |
position: relative; | |
z-index: 9; | |
font-size: 28px; | |
transition: 0.4s cubic-bezier(0.75, 0.885, 0.32, 1); | |
text-align: right; | |
opacity: 0.25; | |
} | |
body #wrap h2 { | |
grid-area: 4/2/5/7; | |
text-align: left; | |
transform: translateY(100px); | |
opacity: 0; | |
} | |
body #wrap h3 { | |
position: relative; | |
z-index: 9; | |
grid-area: 10/11/11/12; | |
opacity: 0.25; | |
transition: 0.4s cubic-bezier(0.75, 0.885, 0.32, 1); | |
} | |
body #wrap .toggle { | |
width: 30px; | |
height: 30px; | |
box-shadow: -5px 0 0 rgba(255, 255, 255, 0.15); | |
z-index: 9; | |
background: rgba(255, 255, 255, 0.05); | |
position: relative; | |
grid-area: 4/2/5/3; | |
transition: 0.2s ease-in-out; | |
} | |
body #wrap .toggle.expand:before { | |
content: "IF Mode"; | |
position: absolute; | |
color: #fff; | |
top: -40px; | |
width: 100px; | |
font-weight: 900; | |
} | |
body #wrap .toggle i { | |
color: #fff; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
} | |
body #wrap .toggle:not(.expand) { | |
margin-top: 40px; | |
box-shadow: -5px 0 0 #ff6a5e; | |
} | |
body #wrap .toggle:not(.expand) i { | |
transform: translate(-50%, -50%) rotate(-90deg); | |
} | |
body #wrap input { | |
cursor: pointer; | |
opacity: 0; | |
} | |
body #wrap .buy { | |
grid-area: 14/3/15/5; | |
background: #ff6a5e; | |
position: relative; | |
height: 50px; | |
left: 40px; | |
border-radius: 3px; | |
z-index: 9; | |
transition: 0.2s ease-in-out; | |
transform: translateY(200px); | |
} | |
body #wrap .buy:not(input) { | |
pointer-events: none; | |
-webkit-animation: fadein 0.2s ease-in-out 1 forwards; | |
animation: fadein 0.2s ease-in-out 1 forwards; | |
} | |
@-webkit-keyframes fadein { | |
from { | |
opacity: 0; | |
} | |
to { | |
opacity: 1; | |
} | |
} | |
@keyframes fadein { | |
from { | |
opacity: 0; | |
} | |
to { | |
opacity: 1; | |
} | |
} | |
body #wrap .buy:not(input):after { | |
content: "Buy Now"; | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
box-shadow: 0 0 0 1px #ff6a5e; | |
border-radius: inherit; | |
right: calc(100% + 10px); | |
top: 0; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
color: #ff6a5e; | |
cursor: pointer; | |
transition: 0.6s ease-in-out; | |
transform: translateY(200px); | |
} | |
body #wrap .buy:before { | |
content: "Check Out"; | |
width: 100%; | |
height: 100%; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
color: #fff; | |
-webkit-animation: buynow 1s ease-in-out 1 forwards; | |
animation: buynow 1s ease-in-out 1 forwards; | |
} | |
@-webkit-keyframes buynow { | |
0% { | |
opacity: 0; | |
} | |
100% { | |
opacity: 1; | |
content: "Check Out"; | |
} | |
} | |
@keyframes buynow { | |
0% { | |
opacity: 0; | |
} | |
100% { | |
opacity: 1; | |
content: "Check Out"; | |
} | |
} | |
body #wrap input.initial { | |
position: relative; | |
grid-area: 4/2/5/3; | |
z-index: 999; | |
width: 30px; | |
height: 70px; | |
opacity: 0; | |
} | |
body #wrap input.initial:first-of-type:hover ~ .toggle.expand { | |
background: #ff6a5e; | |
} | |
body #wrap input.initial:checked { | |
pointer-events: none; | |
} | |
body #wrap input.initial:checked ~ .toggle:not(.expand) { | |
transform: translateX(-100px); | |
} | |
body #wrap input.initial:checked ~ input[type=radio] { | |
pointer-events: all; | |
} | |
body #wrap input.initial:checked ~ .wheeltoggle, body #wrap input.initial:checked ~ h3, body #wrap input.initial:checked ~ h1 { | |
filter: saturate(1); | |
opacity: 1; | |
} | |
body #wrap input.initial:checked ~ .buy { | |
transform: translateY(0); | |
min-width: 110px; | |
transition-delay: 1s; | |
} | |
body #wrap input.initial:checked ~ .buy:after { | |
transform: translateY(200px); | |
} | |
body #wrap input.initial:checked ~ .buy:checked { | |
transform: translateY(-250px); | |
} | |
body #wrap input.initial:checked ~ .buy:checked ~ .toggle { | |
opacity: 0; | |
} | |
body #wrap input.initial:checked ~ .buy:checked ~ .frame .wheel .inner { | |
-webkit-animation: wheelroll6 1.25s ease-in-out 1 forwards; | |
animation: wheelroll6 1.25s ease-in-out 1 forwards; | |
} | |
body #wrap input.initial:checked ~ .buy:checked ~ h2 { | |
transform: translateY(0px); | |
transition-delay: 0.4s; | |
opacity: 1; | |
} | |
body #wrap input.initial:checked ~ .buy:checked ~ .wheeltoggle, body #wrap input.initial:checked ~ .buy:checked ~ h1, body #wrap input.initial:checked ~ .buy:checked ~ h3 { | |
transform: translateY(100px); | |
opacity: 0; | |
} | |
body #wrap input.initial:checked ~ .buy:checked ~ .wheeltoggle:nth-of-type(1) { | |
transition-delay: 0.05s; | |
} | |
body #wrap input.initial:checked ~ .buy:checked ~ .wheeltoggle:nth-of-type(2) { | |
transition-delay: 0.1s; | |
} | |
body #wrap input.initial:checked ~ .buy:checked ~ .wheeltoggle:nth-of-type(3) { | |
transition-delay: 0.15s; | |
} | |
body #wrap input.initial:checked ~ .buy:checked ~ .wheeltoggle:nth-of-type(4) { | |
transition-delay: 0.2s; | |
} | |
body #wrap input.initial:checked ~ .buy:checked ~ h3 { | |
transition-delay: 0.1s; | |
} | |
body #wrap input.initial:checked ~ .buy:checked ~ .buy { | |
-webkit-animation: bounceback 1s ease-in-out 1 forwards; | |
animation: bounceback 1s ease-in-out 1 forwards; | |
} | |
body #wrap input.initial:checked ~ .buy:checked ~ .buy:after { | |
transition-delay: 0.3s; | |
transform: translateY(0); | |
opacity: 1; | |
} | |
body #wrap input.initial:checked ~ .buy:checked ~ .buy:before { | |
-webkit-animation: buynow2 1s ease-in-out 1 forwards; | |
animation: buynow2 1s ease-in-out 1 forwards; | |
} | |
@-webkit-keyframes buynow2 { | |
100% { | |
content: "Back"; | |
} | |
} | |
@keyframes buynow2 { | |
100% { | |
content: "Back"; | |
} | |
} | |
@-webkit-keyframes bounceback { | |
0% { | |
transform: translateY(0px); | |
} | |
50% { | |
transform: translateY(200px); | |
} | |
50.5% { | |
transform: translateY(200px); | |
opacity: 0; | |
} | |
51% { | |
transform: translateY(-200px); | |
opacity: 0; | |
} | |
100% { | |
transform: translateY(-250px); | |
} | |
} | |
@keyframes bounceback { | |
0% { | |
transform: translateY(0px); | |
} | |
50% { | |
transform: translateY(200px); | |
} | |
50.5% { | |
transform: translateY(200px); | |
opacity: 0; | |
} | |
51% { | |
transform: translateY(-200px); | |
opacity: 0; | |
} | |
100% { | |
transform: translateY(-250px); | |
} | |
} | |
body #wrap input.initial:checked ~ .buy:checked ~ .frame:not(.two):not(i):not(.buy) { | |
transform: scale(0.7) translateX(350px) translateY(50px); | |
transition: 0.75s cubic-bezier(0.75, 0.885, 0.32, 1); | |
transition-delay: 0.25s; | |
} | |
body #wrap input.initial:checked ~ .buy:checked ~ .background:before { | |
transition: transform 0.4s cubic-bezier(0.75, 0.885, 0.32, 1), left 0.4s cubic-bezier(0.75, 0.885, 0.32, 1) !important; | |
transition-delay: 0.4s, 0.8s !important; | |
transform-origin: right; | |
transform: scaleX(2) !important; | |
left: -5%; | |
} | |
body #wrap input.initial:checked ~ .buy:checked ~ .background:after { | |
transform: scaleY(1.25) translateX(-40px) !important; | |
transition-delay: 0.3s; | |
} | |
body #wrap input.initial:checked ~ .buy:not(div) { | |
pointer-events: all; | |
z-index: 999; | |
} | |
body #wrap input.initial:checked ~ .buy:not(div):hover ~ .buy { | |
transition-delay: 0s; | |
background: #ff3b2b; | |
} | |
body #wrap .wheeltoggle { | |
box-shadow: 0 0 0 1px #efefef, 0 10px 20px -20px #4e567d; | |
border-radius: 3px; | |
transition: 0.3s ease-in-out; | |
pointer-events: none; | |
filter: saturate(0); | |
opacity: 0.5; | |
background: #fff; | |
z-index: 9; | |
} | |
body #wrap .wheeltoggle:before { | |
content: ""; | |
position: absolute; | |
width: 100%; | |
height: 50px; | |
top: 0; | |
transition: 0.4s ease-in-out; | |
} | |
body #wrap .wheeltoggle:nth-of-type(1):after { | |
content: "Wheel Type 1"; | |
position: absolute; | |
width: 100%; | |
top: 55px; | |
font-size: 10px; | |
text-align: center; | |
line-height: 1.25; | |
color: #4e567d; | |
text-transform: uppercase; | |
} | |
body #wrap .wheeltoggle:nth-of-type(1):before { | |
background: url(https://assets.codepen.io/383755/wheel1.png) 50% 50%/80% auto no-repeat; | |
} | |
body #wrap .wheeltoggle:nth-of-type(2):after { | |
content: "Wheel Type 2"; | |
position: absolute; | |
width: 100%; | |
top: 55px; | |
font-size: 10px; | |
text-align: center; | |
line-height: 1.25; | |
color: #4e567d; | |
text-transform: uppercase; | |
} | |
body #wrap .wheeltoggle:nth-of-type(2):before { | |
background: url(https://assets.codepen.io/383755/wheel2.png) 50% 50%/80% auto no-repeat; | |
} | |
body #wrap .wheeltoggle:nth-of-type(3):after { | |
content: "Wheel Type 3"; | |
position: absolute; | |
width: 100%; | |
top: 55px; | |
font-size: 10px; | |
text-align: center; | |
line-height: 1.25; | |
color: #4e567d; | |
text-transform: uppercase; | |
} | |
body #wrap .wheeltoggle:nth-of-type(3):before { | |
background: url(https://assets.codepen.io/383755/wheel3.png) 50% 50%/80% auto no-repeat; | |
} | |
body #wrap .wheeltoggle:nth-of-type(4):after { | |
content: "Wheel Type 4"; | |
position: absolute; | |
width: 100%; | |
top: 55px; | |
font-size: 10px; | |
text-align: center; | |
line-height: 1.25; | |
color: #4e567d; | |
text-transform: uppercase; | |
} | |
body #wrap .wheeltoggle:nth-of-type(4):before { | |
background: url(https://assets.codepen.io/383755/wheel4.png) 50% 50%/80% auto no-repeat; | |
} | |
body #wrap input[type=radio], | |
body #wrap .wheeltoggle { | |
position: absolute; | |
z-index: 999; | |
width: 50px; | |
height: 90px; | |
z-index: 999; | |
pointer-events: none; | |
} | |
body #wrap input[type=radio].wheel1, body #wrap input[type=radio]:not(input):nth-of-type(1), | |
body #wrap .wheeltoggle.wheel1, | |
body #wrap .wheeltoggle:not(input):nth-of-type(1) { | |
grid-area: 11/14/12/15; | |
} | |
body #wrap input[type=radio].wheel2, body #wrap input[type=radio]:not(input):nth-of-type(2), | |
body #wrap .wheeltoggle.wheel2, | |
body #wrap .wheeltoggle:not(input):nth-of-type(2) { | |
grid-area: 11/13/12/14; | |
} | |
body #wrap input[type=radio].wheel3, body #wrap input[type=radio]:not(input):nth-of-type(3), | |
body #wrap .wheeltoggle.wheel3, | |
body #wrap .wheeltoggle:not(input):nth-of-type(3) { | |
grid-area: 11/12/12/13; | |
} | |
body #wrap input[type=radio].wheel4, body #wrap input[type=radio]:not(input):nth-of-type(4), | |
body #wrap .wheeltoggle.wheel4, | |
body #wrap .wheeltoggle:not(input):nth-of-type(4) { | |
grid-area: 11/11/12/12; | |
} | |
body #wrap input[type=radio].wheel1:checked ~ .wheeltoggle:nth-of-type(1), | |
body #wrap .wheeltoggle.wheel1:checked ~ .wheeltoggle:nth-of-type(1) { | |
box-shadow: 0 0 0 1px #ff6a5e, 0 10px 20px -30px #4e567d; | |
} | |
body #wrap input[type=radio].wheel1:hover ~ .wheeltoggle:nth-of-type(1), | |
body #wrap .wheeltoggle.wheel1:hover ~ .wheeltoggle:nth-of-type(1) { | |
box-shadow: 0 0 0 1px #efefef, 0 10px 20px -10px #4e567d; | |
transform: scale(1.05); | |
} | |
body #wrap input[type=radio].wheel1:hover ~ .wheeltoggle:nth-of-type(1):before, | |
body #wrap .wheeltoggle.wheel1:hover ~ .wheeltoggle:nth-of-type(1):before { | |
transform: rotate(180deg); | |
} | |
body #wrap input[type=radio].wheel1:checked ~ .frame > div.wheel, | |
body #wrap .wheeltoggle.wheel1:checked ~ .frame > div.wheel { | |
-webkit-animation: wheelout1 0.75s ease-in-out 1 forwards 0.25s; | |
animation: wheelout1 0.75s ease-in-out 1 forwards 0.25s; | |
} | |
body #wrap input[type=radio].wheel1:checked ~ .frame > div.wheel .inner:before, | |
body #wrap .wheeltoggle.wheel1:checked ~ .frame > div.wheel .inner:before { | |
background-image: url(https://assets.codepen.io/383755/wheel1.png); | |
-webkit-animation: wheelroll1 1s ease-in-out 1 forwards 0s; | |
animation: wheelroll1 1s ease-in-out 1 forwards 0s; | |
} | |
@-webkit-keyframes wheelroll1 { | |
from { | |
transform: rotate(0deg); | |
} | |
to { | |
transform: rotate(720deg); | |
} | |
} | |
@keyframes wheelroll1 { | |
from { | |
transform: rotate(0deg); | |
} | |
to { | |
transform: rotate(720deg); | |
} | |
} | |
@-webkit-keyframes wheelroll6 { | |
from { | |
transform: rotate(0deg); | |
} | |
to { | |
transform: rotate(360deg); | |
} | |
} | |
@keyframes wheelroll6 { | |
from { | |
transform: rotate(0deg); | |
} | |
to { | |
transform: rotate(360deg); | |
} | |
} | |
body #wrap input[type=radio].wheel1:checked ~ .frame > div.wheel.back, | |
body #wrap .wheeltoggle.wheel1:checked ~ .frame > div.wheel.back { | |
-webkit-animation: wheelback1 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; | |
animation: wheelback1 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; | |
} | |
@-webkit-keyframes wheelback1 { | |
0% { | |
transform: translate(0px); | |
} | |
50% { | |
transform: translateX(-700px); | |
} | |
100% { | |
transform: translate(0px); | |
} | |
} | |
@keyframes wheelback1 { | |
0% { | |
transform: translate(0px); | |
} | |
50% { | |
transform: translateX(-700px); | |
} | |
100% { | |
transform: translate(0px); | |
} | |
} | |
@-webkit-keyframes wheelout1 { | |
0% { | |
transform: translate(0px); | |
} | |
50% { | |
transform: translateX(700px); | |
} | |
100% { | |
transform: translate(0px); | |
} | |
} | |
@keyframes wheelout1 { | |
0% { | |
transform: translate(0px); | |
} | |
50% { | |
transform: translateX(700px); | |
} | |
100% { | |
transform: translate(0px); | |
} | |
} | |
body #wrap input[type=radio].wheel1:checked ~ .frame > div:not(.wheel), | |
body #wrap .wheeltoggle.wheel1:checked ~ .frame > div:not(.wheel) { | |
-webkit-animation: jump1 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; | |
animation: jump1 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; | |
} | |
@-webkit-keyframes jump1 { | |
0% { | |
transform: translateY(0); | |
} | |
50% { | |
transform: translateY(-75px) rotate(-2.5deg); | |
} | |
100% { | |
transform: translateY(0); | |
} | |
} | |
@keyframes jump1 { | |
0% { | |
transform: translateY(0); | |
} | |
50% { | |
transform: translateY(-75px) rotate(-2.5deg); | |
} | |
100% { | |
transform: translateY(0); | |
} | |
} | |
body #wrap input[type=radio].wheel2:checked ~ .wheeltoggle:nth-of-type(2), | |
body #wrap .wheeltoggle.wheel2:checked ~ .wheeltoggle:nth-of-type(2) { | |
box-shadow: 0 0 0 1px #ff6a5e, 0 10px 20px -30px #4e567d; | |
} | |
body #wrap input[type=radio].wheel2:hover ~ .wheeltoggle:nth-of-type(2), | |
body #wrap .wheeltoggle.wheel2:hover ~ .wheeltoggle:nth-of-type(2) { | |
box-shadow: 0 0 0 1px #efefef, 0 10px 20px -10px #4e567d; | |
transform: scale(1.05); | |
} | |
body #wrap input[type=radio].wheel2:hover ~ .wheeltoggle:nth-of-type(2):before, | |
body #wrap .wheeltoggle.wheel2:hover ~ .wheeltoggle:nth-of-type(2):before { | |
transform: rotate(180deg); | |
} | |
body #wrap input[type=radio].wheel2:checked ~ .frame > div.wheel, | |
body #wrap .wheeltoggle.wheel2:checked ~ .frame > div.wheel { | |
-webkit-animation: wheelout2 0.75s ease-in-out 1 forwards 0.25s; | |
animation: wheelout2 0.75s ease-in-out 1 forwards 0.25s; | |
} | |
body #wrap input[type=radio].wheel2:checked ~ .frame > div.wheel .inner:before, | |
body #wrap .wheeltoggle.wheel2:checked ~ .frame > div.wheel .inner:before { | |
background-image: url(https://assets.codepen.io/383755/wheel2.png); | |
-webkit-animation: wheelroll2 1s ease-in-out 1 forwards 0s; | |
animation: wheelroll2 1s ease-in-out 1 forwards 0s; | |
} | |
@-webkit-keyframes wheelroll2 { | |
from { | |
transform: rotate(0deg); | |
} | |
to { | |
transform: rotate(720deg); | |
} | |
} | |
@keyframes wheelroll2 { | |
from { | |
transform: rotate(0deg); | |
} | |
to { | |
transform: rotate(720deg); | |
} | |
} | |
@keyframes wheelroll6 { | |
from { | |
transform: rotate(0deg); | |
} | |
to { | |
transform: rotate(360deg); | |
} | |
} | |
body #wrap input[type=radio].wheel2:checked ~ .frame > div.wheel.back, | |
body #wrap .wheeltoggle.wheel2:checked ~ .frame > div.wheel.back { | |
-webkit-animation: wheelback2 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; | |
animation: wheelback2 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; | |
} | |
@-webkit-keyframes wheelback2 { | |
0% { | |
transform: translate(0px); | |
} | |
50% { | |
transform: translateX(-700px); | |
} | |
100% { | |
transform: translate(0px); | |
} | |
} | |
@keyframes wheelback2 { | |
0% { | |
transform: translate(0px); | |
} | |
50% { | |
transform: translateX(-700px); | |
} | |
100% { | |
transform: translate(0px); | |
} | |
} | |
@-webkit-keyframes wheelout2 { | |
0% { | |
transform: translate(0px); | |
} | |
50% { | |
transform: translateX(700px); | |
} | |
100% { | |
transform: translate(0px); | |
} | |
} | |
@keyframes wheelout2 { | |
0% { | |
transform: translate(0px); | |
} | |
50% { | |
transform: translateX(700px); | |
} | |
100% { | |
transform: translate(0px); | |
} | |
} | |
body #wrap input[type=radio].wheel2:checked ~ .frame > div:not(.wheel), | |
body #wrap .wheeltoggle.wheel2:checked ~ .frame > div:not(.wheel) { | |
-webkit-animation: jump2 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; | |
animation: jump2 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; | |
} | |
@-webkit-keyframes jump2 { | |
0% { | |
transform: translateY(0); | |
} | |
50% { | |
transform: translateY(-75px) rotate(-2.5deg); | |
} | |
100% { | |
transform: translateY(0); | |
} | |
} | |
@keyframes jump2 { | |
0% { | |
transform: translateY(0); | |
} | |
50% { | |
transform: translateY(-75px) rotate(-2.5deg); | |
} | |
100% { | |
transform: translateY(0); | |
} | |
} | |
body #wrap input[type=radio].wheel3:checked ~ .wheeltoggle:nth-of-type(3), | |
body #wrap .wheeltoggle.wheel3:checked ~ .wheeltoggle:nth-of-type(3) { | |
box-shadow: 0 0 0 1px #ff6a5e, 0 10px 20px -30px #4e567d; | |
} | |
body #wrap input[type=radio].wheel3:hover ~ .wheeltoggle:nth-of-type(3), | |
body #wrap .wheeltoggle.wheel3:hover ~ .wheeltoggle:nth-of-type(3) { | |
box-shadow: 0 0 0 1px #efefef, 0 10px 20px -10px #4e567d; | |
transform: scale(1.05); | |
} | |
body #wrap input[type=radio].wheel3:hover ~ .wheeltoggle:nth-of-type(3):before, | |
body #wrap .wheeltoggle.wheel3:hover ~ .wheeltoggle:nth-of-type(3):before { | |
transform: rotate(180deg); | |
} | |
body #wrap input[type=radio].wheel3:checked ~ .frame > div.wheel, | |
body #wrap .wheeltoggle.wheel3:checked ~ .frame > div.wheel { | |
-webkit-animation: wheelout3 0.75s ease-in-out 1 forwards 0.25s; | |
animation: wheelout3 0.75s ease-in-out 1 forwards 0.25s; | |
} | |
body #wrap input[type=radio].wheel3:checked ~ .frame > div.wheel .inner:before, | |
body #wrap .wheeltoggle.wheel3:checked ~ .frame > div.wheel .inner:before { | |
background-image: url(https://assets.codepen.io/383755/wheel3.png); | |
-webkit-animation: wheelroll3 1s ease-in-out 1 forwards 0s; | |
animation: wheelroll3 1s ease-in-out 1 forwards 0s; | |
} | |
@-webkit-keyframes wheelroll3 { | |
from { | |
transform: rotate(0deg); | |
} | |
to { | |
transform: rotate(720deg); | |
} | |
} | |
@keyframes wheelroll3 { | |
from { | |
transform: rotate(0deg); | |
} | |
to { | |
transform: rotate(720deg); | |
} | |
} | |
@keyframes wheelroll6 { | |
from { | |
transform: rotate(0deg); | |
} | |
to { | |
transform: rotate(360deg); | |
} | |
} | |
body #wrap input[type=radio].wheel3:checked ~ .frame > div.wheel.back, | |
body #wrap .wheeltoggle.wheel3:checked ~ .frame > div.wheel.back { | |
-webkit-animation: wheelback3 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; | |
animation: wheelback3 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; | |
} | |
@-webkit-keyframes wheelback3 { | |
0% { | |
transform: translate(0px); | |
} | |
50% { | |
transform: translateX(-700px); | |
} | |
100% { | |
transform: translate(0px); | |
} | |
} | |
@keyframes wheelback3 { | |
0% { | |
transform: translate(0px); | |
} | |
50% { | |
transform: translateX(-700px); | |
} | |
100% { | |
transform: translate(0px); | |
} | |
} | |
@-webkit-keyframes wheelout3 { | |
0% { | |
transform: translate(0px); | |
} | |
50% { | |
transform: translateX(700px); | |
} | |
100% { | |
transform: translate(0px); | |
} | |
} | |
@keyframes wheelout3 { | |
0% { | |
transform: translate(0px); | |
} | |
50% { | |
transform: translateX(700px); | |
} | |
100% { | |
transform: translate(0px); | |
} | |
} | |
body #wrap input[type=radio].wheel3:checked ~ .frame > div:not(.wheel), | |
body #wrap .wheeltoggle.wheel3:checked ~ .frame > div:not(.wheel) { | |
-webkit-animation: jump3 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; | |
animation: jump3 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; | |
} | |
@-webkit-keyframes jump3 { | |
0% { | |
transform: translateY(0); | |
} | |
50% { | |
transform: translateY(-75px) rotate(-2.5deg); | |
} | |
100% { | |
transform: translateY(0); | |
} | |
} | |
@keyframes jump3 { | |
0% { | |
transform: translateY(0); | |
} | |
50% { | |
transform: translateY(-75px) rotate(-2.5deg); | |
} | |
100% { | |
transform: translateY(0); | |
} | |
} | |
body #wrap input[type=radio].wheel4:checked ~ .wheeltoggle:nth-of-type(4), | |
body #wrap .wheeltoggle.wheel4:checked ~ .wheeltoggle:nth-of-type(4) { | |
box-shadow: 0 0 0 1px #ff6a5e, 0 10px 20px -30px #4e567d; | |
} | |
body #wrap input[type=radio].wheel4:hover ~ .wheeltoggle:nth-of-type(4), | |
body #wrap .wheeltoggle.wheel4:hover ~ .wheeltoggle:nth-of-type(4) { | |
box-shadow: 0 0 0 1px #efefef, 0 10px 20px -10px #4e567d; | |
transform: scale(1.05); | |
} | |
body #wrap input[type=radio].wheel4:hover ~ .wheeltoggle:nth-of-type(4):before, | |
body #wrap .wheeltoggle.wheel4:hover ~ .wheeltoggle:nth-of-type(4):before { | |
transform: rotate(180deg); | |
} | |
body #wrap input[type=radio].wheel4:checked ~ .frame > div.wheel, | |
body #wrap .wheeltoggle.wheel4:checked ~ .frame > div.wheel { | |
-webkit-animation: wheelout4 0.75s ease-in-out 1 forwards 0.25s; | |
animation: wheelout4 0.75s ease-in-out 1 forwards 0.25s; | |
} | |
body #wrap input[type=radio].wheel4:checked ~ .frame > div.wheel .inner:before, | |
body #wrap .wheeltoggle.wheel4:checked ~ .frame > div.wheel .inner:before { | |
background-image: url(https://assets.codepen.io/383755/wheel4.png); | |
-webkit-animation: wheelroll4 1s ease-in-out 1 forwards 0s; | |
animation: wheelroll4 1s ease-in-out 1 forwards 0s; | |
} | |
@-webkit-keyframes wheelroll4 { | |
from { | |
transform: rotate(0deg); | |
} | |
to { | |
transform: rotate(720deg); | |
} | |
} | |
@keyframes wheelroll4 { | |
from { | |
transform: rotate(0deg); | |
} | |
to { | |
transform: rotate(720deg); | |
} | |
} | |
@keyframes wheelroll6 { | |
from { | |
transform: rotate(0deg); | |
} | |
to { | |
transform: rotate(360deg); | |
} | |
} | |
body #wrap input[type=radio].wheel4:checked ~ .frame > div.wheel.back, | |
body #wrap .wheeltoggle.wheel4:checked ~ .frame > div.wheel.back { | |
-webkit-animation: wheelback4 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; | |
animation: wheelback4 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; | |
} | |
@-webkit-keyframes wheelback4 { | |
0% { | |
transform: translate(0px); | |
} | |
50% { | |
transform: translateX(-700px); | |
} | |
100% { | |
transform: translate(0px); | |
} | |
} | |
@keyframes wheelback4 { | |
0% { | |
transform: translate(0px); | |
} | |
50% { | |
transform: translateX(-700px); | |
} | |
100% { | |
transform: translate(0px); | |
} | |
} | |
@-webkit-keyframes wheelout4 { | |
0% { | |
transform: translate(0px); | |
} | |
50% { | |
transform: translateX(700px); | |
} | |
100% { | |
transform: translate(0px); | |
} | |
} | |
@keyframes wheelout4 { | |
0% { | |
transform: translate(0px); | |
} | |
50% { | |
transform: translateX(700px); | |
} | |
100% { | |
transform: translate(0px); | |
} | |
} | |
body #wrap input[type=radio].wheel4:checked ~ .frame > div:not(.wheel), | |
body #wrap .wheeltoggle.wheel4:checked ~ .frame > div:not(.wheel) { | |
-webkit-animation: jump4 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; | |
animation: jump4 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; | |
} | |
@-webkit-keyframes jump4 { | |
0% { | |
transform: translateY(0); | |
} | |
50% { | |
transform: translateY(-75px) rotate(-2.5deg); | |
} | |
100% { | |
transform: translateY(0); | |
} | |
} | |
@keyframes jump4 { | |
0% { | |
transform: translateY(0); | |
} | |
50% { | |
transform: translateY(-75px) rotate(-2.5deg); | |
} | |
100% { | |
transform: translateY(0); | |
} | |
} | |
body #wrap input[type=radio]:checked ~ .frame > div:not(.wheel), | |
body #wrap .wheeltoggle:checked ~ .frame > div:not(.wheel) { | |
-webkit-animation: jump 1s ease-in-out 1 forwards; | |
animation: jump 1s ease-in-out 1 forwards; | |
} | |
body #wrap input.initial:checked ~ .toggle { | |
box-shadow: -5px 0 0 #ff6a5e; | |
} | |
body #wrap input.initial:checked ~ .toggle:not(.expand) { | |
box-shadow: -5px 0 0 rgba(255, 255, 255, 0.15); | |
} | |
body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) { | |
transform: rotate(0deg); | |
margin-left: 0px; | |
} | |
body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) { | |
transform: rotate(0deg); | |
margin-left: 0px; | |
} | |
body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle):before, body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle):after { | |
transform: rotate(0deg); | |
} | |
body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle).background:after { | |
transform: scaleY(1.25) translateX(30px); | |
} | |
body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle).background:before { | |
transition: 0.5s cubic-bezier(0.75, 0.885, 0.32, 1); | |
} | |
body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle).frame { | |
transform: scale(0.7) rotate(0deg) translateY(50px); | |
margin-left: -25px; | |
} | |
body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle):before, body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle):after { | |
transform: rotate(0deg); | |
} | |
body #wrap * { | |
transition: transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), margin-left 0.3s cubic-bezier(0.75, 0.885, 0.32, 1); | |
} | |
body #wrap *.frame { | |
transition: transform 0.6s cubic-bezier(0.75, 0.885, 0.32, 1), margin-left 0.4s cubic-bezier(0.75, 0.885, 0.32, 1); | |
transition-delay: 0.2s, 0.4s; | |
} | |
body #wrap *:before, body #wrap *:after { | |
transition: transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), margin-left 0.3s cubic-bezier(0.75, 0.885, 0.32, 1); | |
} | |
body #wrap .background { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
left: 0; | |
top: 0; | |
background: #4e567d; | |
overflow: hidden; | |
} | |
body #wrap .background:before { | |
content: ""; | |
position: absolute; | |
width: 65%; | |
height: 100%; | |
left: 35%; | |
top: 0; | |
background: #fff; | |
z-index: 2; | |
transition: cubic-bezier(0.75, 0.885, 0.32, 1) 0.5s ease-in-out; | |
} | |
body #wrap .background:after { | |
content: "IF Mode"; | |
position: absolute; | |
z-index: 0; | |
width: 100%; | |
height: 80%; | |
top: 10%; | |
left: 50px; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
font-size: 200px; | |
font-weight: 900; | |
color: #444b6d; | |
transition: 1s ease-in-out; | |
transform: scaleY(1.25); | |
} | |
body #wrap .frame { | |
position: absolute; | |
top: 60px; | |
left: 85px; | |
width: 427px; | |
height: 365px; | |
z-index: 2; | |
transform-origin: 190px 210px; | |
transform: scale(0.8) rotate(-62.5deg); | |
} | |
body #wrap .frame div { | |
position: absolute; | |
background-size: cover; | |
width: 100%; | |
height: 100%; | |
top: 0; | |
left: 0; | |
} | |
body #wrap .frame div.wheel.two.front, body #wrap .frame div.wheel.three.front, body #wrap .frame div.wheel.four.front { | |
transform: translateX(700px); | |
margin-left: 0px; | |
} | |
body #wrap .frame div.wheel.two.back, body #wrap .frame div.wheel.three.back, body #wrap .frame div.wheel.four.back { | |
transform: translateX(-700px); | |
} | |
body #wrap .frame div.wheel.front { | |
transform-origin: 273px 190px; | |
margin-left: -75px; | |
transform: rotate(115deg); | |
transition-delay: 0.5s, 0.8s; | |
z-index: 2; | |
} | |
body #wrap .frame div.wheel.back { | |
z-index: -1; | |
} | |
body #wrap .frame div.wheel.back .inner { | |
left: -40px; | |
} | |
body #wrap .frame div.wheel .inner { | |
position: absolute; | |
width: 210px; | |
height: 210px; | |
border-radius: 100%; | |
z-index: -1; | |
top: 170px; | |
left: 300px; | |
} | |
body #wrap .frame div.wheel .inner:before { | |
content: ""; | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
background-image: url("https://assets.codepen.io/383755/wheel1.png"); | |
background-size: contain; | |
transform: rotate(360deg); | |
transition: transform 1.25s cubic-bezier(0.75, 0.885, 0.32, 1), background-image 0s ease-in-out; | |
transition-delay: 0.1s, 0.5s; | |
} | |
body #wrap .frame div.rear { | |
background-image: url("https://assets.codepen.io/383755/rear.png"); | |
} | |
body #wrap .frame div.stem { | |
background-image: url("https://assets.codepen.io/383755/stem.png"); | |
transform-origin: 273px 190px; | |
margin-left: -105px; | |
transform: rotate(115deg); | |
transition-delay: 0.5s, 0.8s; | |
} | |
body #wrap .frame div.shaft { | |
background-image: url("https://assets.codepen.io/383755/shaft.png"); | |
transform-origin: 220px 200px; | |
transform: translateX(-70px) translateY(40px); | |
transition-delay: 0.8s; | |
} | |
body #wrap .frame div.seat { | |
background-image: url("https://assets.codepen.io/383755/seat.png"); | |
transform: translateY(100px) translateX(40px); | |
transition: 0.4s ease-in-out; | |
transition-delay: 0.65s; | |
z-index: -1; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment