Audi R8 in HTML/CSS

Developer
Kevin Jannis
Size
7,579 Kb
Views
8,096
  1. Audi R8 in HTML/CSS Previews
  2. Audi R8 in HTML/CSS HTML Codes
  3. Audi R8 in HTML/CSS CSS Codes
  4. Audi R8 in HTML/CSS JS Codes

How do I make an audi r8 in html/css?

What is a audi r8 in html/css? How do you make a audi r8 in html/css? This script and codes were developed by Kevin Jannis on 25 December 2022, Sunday.

Audi R8 in HTML/CSS Previews
IQ Test

Audi R8 in HTML/CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Audi R8 in HTML/CSS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="r8"> <div class="body"> <div class="hood"> <div class="top"></div> <div class="bottom"></div> <div class="lights"></div> </div> <div class="top"> <div class="front"></div> <div class="center"></div> <div class="rear"></div> </div> <div class="windows"> <div class="front"></div> <div class="center"></div> </div> <div class="door"></div> <div class="mirror"></div> <div class="shine"> <div class="door-top"></div> <div class="door-center"></div> <div class="door-bottom"></div> <div class="door-dark"></div> </div> <div class="trunk"> <div class="top"></div> <div class="bottom"></div> <div class="lights"></div> </div> <div class="wheel-socket"> <div class="front"></div> <div class="rear"></div> </div> <div class="kit"> <div class="front"></div> <div class="center"></div> <div class="rear"></div> </div> </div> <div class="wheel front"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="wheel rear"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="shadow"></div>
</div> <script src="js/index.js"></script>
</body>
</html>

Audi R8 in HTML/CSS - Script Codes CSS Codes

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;
}
body { position: relative; background: #c4a1a9; padding: 40px 0; text-align: center; overflow: hidden;
}
#r8 { position: relative; display: inline-block; z-index: 0; width: 291px; height: 88px; overflow: hidden;
}
#r8 .body { position: absolute; overflow: hidden; z-index: 5; top: 0; left: 0; width: 291px; height: 75px;
}
#r8 .hood .top,
#r8 .hood .bottom { position: absolute; background: #a6c3cb;
}
#r8 .hood .top { -moz-border-radius-topleft: 205px 65px; -webkit-border-top-left-radius: 205px 65px; border-top-left-radius: 205px 65px; top: 23px; left: 3px; width: 80px; height: 40px; z-index: 10;
}
#r8 .hood .top:before { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: -3px -3px 0 0 #a6c3cb, 1px -2px 0 0 #c5d8dc; -webkit-box-shadow: -3px -3px 0 0 #a6c3cb, 1px -2px 0 0 #c5d8dc; box-shadow: -3px -3px 0 0 #a6c3cb, 1px -2px 0 0 #c5d8dc; content: " "; position: absolute; top: 9px; left: 26px; width: 51px; height: 20px;
}
#r8 .hood .bottom { top: 61px; left: 3px; width: 22px; height: 8px;
}
#r8 .hood .bottom:before { content: " "; position: absolute; top: 3px; left: -3px; border-style: solid; border-color: transparent #a6c3cb transparent transparent; border-width: 3px 3px 2px 0;
}
#r8 .hood .bottom:after { content: " "; position: absolute; top: 8px; left: 0; border-style: solid; border-color: #a6c3cb #a6c3cb transparent transparent; border-width: 0 22px 8px 0;
}
#r8 .hood .lights { -moz-border-radius-topleft: 34px 30px; -webkit-border-top-left-radius: 34px 30px; border-top-left-radius: 34px 30px; -moz-box-shadow: inset 0 -4px 0 0 #010207, inset 0 -5px 0 0 #33383c, inset 0 -8px 0 0 #010207, inset 0 -9px 0 0 #33383c, inset 0 -12px 0 0 #010207, inset 0 -13px 0 0 #33383c, inset 0 -17px 0 0 #010207; -webkit-box-shadow: inset 0 -4px 0 0 #010207, inset 0 -5px 0 0 #33383c, inset 0 -8px 0 0 #010207, inset 0 -9px 0 0 #33383c, inset 0 -12px 0 0 #010207, inset 0 -13px 0 0 #33383c, inset 0 -17px 0 0 #010207; box-shadow: inset 0 -4px 0 0 #010207, inset 0 -5px 0 0 #33383c, inset 0 -8px 0 0 #010207, inset 0 -9px 0 0 #33383c, inset 0 -12px 0 0 #010207, inset 0 -13px 0 0 #33383c, inset 0 -17px 0 0 #010207; position: absolute; background: #e5e6e8; overflow: hidden; z-index: 20; top: 37px; left: 5px; width: 16px; height: 24px;
}
#r8 .hood .lights:before { -moz-border-radius-topleft: 50%; -webkit-border-top-left-radius: 50%; border-top-left-radius: 50%; content: " "; position: absolute; background: #a7c2cb; top: 0; left: 12px; width: 20px; height: 30px;
}
#r8 .hood .lights:after { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: 7px 24px 0 0 #a7c2cb; -webkit-box-shadow: 7px 24px 0 0 #a7c2cb; box-shadow: 7px 24px 0 0 #a7c2cb; content: " "; position: absolute; top: -6px; left: -6px; width: 20px; height: 30px;
}
#r8 .top .front,
#r8 .top .center,
#r8 .top .rear { position: absolute; background: #a6c3cb; overflow: hidden; top: 0;
}
#r8 .top .front { -moz-border-radius-topleft: 115px 50px; -webkit-border-top-left-radius: 115px 50px; border-top-left-radius: 115px 50px; left: 64px; width: 90px; height: 67px;
}
#r8 .top .center { -moz-border-radius-topright: 185px 22px; -webkit-border-top-right-radius: 185px 22px; border-top-right-radius: 185px 22px; left: 151px; width: 30px; height: 67px;
}
#r8 .top .rear { position: relative; background: none; border-style: solid; border-color: transparent transparent transparent #a6c3cb; border-width: 14px 0 0 61px; overflow: visible; top: 5px; left: 181px;
}
#r8 .top .rear:before { content: " "; position: absolute; background: #a6c3cb; display: block; top: 0; left: -61px; width: 61px; height: 42px;
}
#r8 .windows { position: absolute; overflow: hidden; top: 5px; left: 40px; width: 161px; height: 19px;
}
#r8 .windows .front { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: -10px 0 0 0 #000207; -webkit-box-shadow: -10px 0 0 0 #000207; box-shadow: -10px 0 0 0 #000207; position: absolute; background: transparent; top: -2px; left: -4px; width: 220px; height: 200px;
}
#r8 .windows .front:after { content: " "; position: absolute; top: 0; left: 57px; border-style: solid; border-color: transparent #a5c2ca transparent transparent; border-width: 0 20px 10px 13px;
}
#r8 .windows .center { -moz-border-radius: 50% 75% 0 0; -webkit-border-radius: 50%; border-radius: 50% 75% 0 0; -moz-box-shadow: inset -91px -127px 0px #2a2f33; -webkit-box-shadow: inset -91px -127px 0px #2a2f33; box-shadow: inset -91px -127px 0px #2a2f33; position: absolute; background: #010207; overflow: hidden; top: 2px; left: 15px; width: 220px; height: 200px;
}
#r8 .windows .center:before { content: " "; position: absolute; z-index: 10; top: 14px; left: 37px; border-style: solid; border-color: transparent transparent #a6c3cb transparent; border-width: 0 0 3px 92px;
}
#r8 .windows .center:after { content: " "; position: absolute; z-index: 20; top: 3px; left: 122px; border-style: solid; border-color: transparent transparent #2a2f33 transparent; border-width: 0 0 14px 10px;
}
#r8 .door { -moz-border-radius-bottomright: 30px 37px; -webkit-border-bottom-right-radius: 30px 37px; border-bottom-right-radius: 30px 37px; position: absolute; z-index: 10; top: 24px; left: 154px; width: 51px; height: 35px; border-style: solid; border-color: transparent transparent #2a2f33 transparent; border-width: 0 0 35px 23px;
}
#r8 .door:before { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; content: " "; position: absolute; background: #2a2f33; top: -5px; left: 17px; width: 11px; height: 11px;
}
#r8 .door:after { -moz-border-radius: 0 0 90% 0; -webkit-border-radius: 0; border-radius: 0 0 90% 0; -moz-box-shadow: 0 3px 0 0 #a6c3cb; -webkit-box-shadow: 0 3px 0 0 #a6c3cb; box-shadow: 0 3px 0 0 #a6c3cb; content: " "; position: absolute; background: transparent; top: 15px; left: -23px; width: 47px; height: 20px;
}
#r8 .mirror { -moz-border-radius-bottomright: 20%; -webkit-border-bottom-right-radius: 20%; border-bottom-right-radius: 20%; -moz-border-radius-bottomleft: 90% 50%; -webkit-border-bottom-left-radius: 90% 50%; border-bottom-left-radius: 90% 50%; position: absolute; z-index: 40; top: 23px; left: 93px; width: 0; height: 8px; border-left: solid 3px #8cb1ba; border-right: solid 3px #749398;
}
#r8 .mirror:after { -moz-border-radius-topleft: 90% 50%; -webkit-border-top-left-radius: 90% 50%; border-top-left-radius: 90% 50%; -moz-border-radius-topright: 20%; -webkit-border-top-right-radius: 20%; border-top-right-radius: 20%; -moz-border-radius-bottomright: 20%; -webkit-border-bottom-right-radius: 20%; border-bottom-right-radius: 20%; -moz-border-radius-bottomleft: 90% 50%; -webkit-border-bottom-left-radius: 90% 50%; border-bottom-left-radius: 90% 50%; -moz-box-shadow: inset -1px 0 0 0 #a6c3cb, inset 2px 0 0 0 #a6c3cb, inset 0 -1px 0 0 #a6c3cb, inset 0 -3px 0 0 #8bb1ba; -webkit-box-shadow: inset -1px 0 0 0 #a6c3cb, inset 2px 0 0 0 #a6c3cb, inset 0 -1px 0 0 #a6c3cb, inset 0 -3px 0 0 #8bb1ba; box-shadow: inset -1px 0 0 0 #a6c3cb, inset 2px 0 0 0 #a6c3cb, inset 0 -1px 0 0 #a6c3cb, inset 0 -3px 0 0 #8bb1ba; content: " "; position: absolute; background: #a6c3cb; border: solid 1px #8bb1ba; top: -8px; left: -5px; width: 11px; height: 10px;
}
#r8 .shine .door-top { position: absolute; z-index: 5; top: 25px; left: 94px; width: 83px; height: 4px; border-style: solid; border-color: transparent transparent #b9ced1 transparent; border-width: 0 0 4px 83px;
}
#r8 .shine .door-center { position: absolute; overflow: hidden; z-index: 5; top: 33px; left: 120px; width: 72px; height: 12px;
}
#r8 .shine .door-center:before { content: " "; position: absolute; top: 0; left: 0; border-style: solid; border-color: transparent transparent #829fa5 transparent; border-width: 0 0 4px 72px;
}
#r8 .shine .door-center:after { -moz-border-radius-topright: 100%; -webkit-border-top-right-radius: 100%; border-top-right-radius: 100%; -moz-box-shadow: 20px -1px 0 0 #829fa5; -webkit-box-shadow: 20px -1px 0 0 #829fa5; box-shadow: 20px -1px 0 0 #829fa5; content: " "; position: absolute; background: transparent; top: 4px; left: 0; width: 44px; height: 5px;
}
#r8 .shine .door-bottom { -moz-border-radius-topleft: 200% 200%; -webkit-border-top-left-radius: 200% 200%; border-top-left-radius: 200% 200%; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; position: absolute; background: #94bdc3; border-top: solid 3px #c6d8da; border-left: solid 3px #c6d8da; top: 46px; left: 85px; width: 84px; height: 18px; z-index: 5;
}
#r8 .shine .door-bottom:after { content: " "; position: absolute; left: 0; bottom: 0; border-style: solid; border-width: 0 0 8px 100px; border-color: transparent transparent #a6c3cb transparent;
}
#r8 .shine .door-dark { position: absolute; z-index: 20; height: 4px; top: 25px; left: 177px; border-style: solid; border-width: 1px 25px 1px 0; border-color: transparent #505558 transparent transparent;
}
#r8 .trunk .top,
#r8 .trunk .bottom { position: absolute; background: #a6c3cb;
}
#r8 .trunk .top { -moz-border-radius-topright: 25px 40px; -webkit-border-top-right-radius: 25px 40px; border-top-right-radius: 25px 40px; -moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; top: 20px; left: 242px; width: 42px; height: 40px;
}
#r8 .trunk .top:before { content: " "; position: absolute; top: -6px; left: -21px; border-style: solid; border-color: transparent transparent transparent #a6c3cb; border-width: 6px 0 0 45px;
}
#r8 .trunk .bottom { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px; top: 60px; left: 260px; width: 24px; height: 10px;
}
#r8 .trunk .bottom:after { content: " "; position: absolute; top: 9px; left: 0; border-style: solid; border-color: transparent transparent transparent #a6c3cb; border-width: 0 0 12px 22px;
}
#r8 .trunk .lights { -moz-border-radius-topright: 25px 40px; -webkit-border-top-right-radius: 25px 40px; border-top-right-radius: 25px 40px; -moz-box-shadow: inset 0 -4px 0 0 #010207, inset 0 -5px 0 0 #33383c, inset 0 -8px 0 0 #010207, inset 0 -9px 0 0 #33383c, inset 0 -12px 0 0 #010207, inset 0 -13px 0 0 #33383c, inset 0 -16px 0 0 #010207, inset 0 -17px 0 0 #33383c, inset 0 -20px 0 0 #010207; -webkit-box-shadow: inset 0 -4px 0 0 #010207, inset 0 -5px 0 0 #33383c, inset 0 -8px 0 0 #010207, inset 0 -9px 0 0 #33383c, inset 0 -12px 0 0 #010207, inset 0 -13px 0 0 #33383c, inset 0 -16px 0 0 #010207, inset 0 -17px 0 0 #33383c, inset 0 -20px 0 0 #010207; box-shadow: inset 0 -4px 0 0 #010207, inset 0 -5px 0 0 #33383c, inset 0 -8px 0 0 #010207, inset 0 -9px 0 0 #33383c, inset 0 -12px 0 0 #010207, inset 0 -13px 0 0 #33383c, inset 0 -16px 0 0 #010207, inset 0 -17px 0 0 #33383c, inset 0 -20px 0 0 #010207; position: absolute; background: #e1417f; top: 23px; right: 8px; width: 17px; height: 26px;
}
#r8 .trunk .lights:before { -moz-border-radius-topright: 100% 80%; -webkit-border-top-right-radius: 100% 80%; border-top-right-radius: 100% 80%; -moz-box-shadow: inset 0 2px 0 0 #a6c3cb, inset 0 -12px 0 0 #a6c3cb, inset -2px 0 0 0 #a6c3cb, inset -3px 0 0 0 #c6d8da; -webkit-box-shadow: inset 0 2px 0 0 #a6c3cb, inset 0 -12px 0 0 #a6c3cb, inset -2px 0 0 0 #a6c3cb, inset -3px 0 0 0 #c6d8da; box-shadow: inset 0 2px 0 0 #a6c3cb, inset 0 -12px 0 0 #a6c3cb, inset -2px 0 0 0 #a6c3cb, inset -3px 0 0 0 #c6d8da; content: " "; position: absolute; background: #a6c3cb; top: 0; left: -10px; width: 20px; height: 37px;
}
#r8 .trunk .lights:after { content: " "; position: absolute; top: 0; left: -15px; border-style: solid; border-color: #a6c3cb transparent transparent transparent; border-width: 10px 10px 0 10px;
}
#r8 .wheel-socket .front,
#r8 .wheel-socket .rear { position: absolute; background: #010005; z-index: 1000;
}
#r8 .wheel-socket .front { -moz-border-radius: 50% 50% 0 50%; -webkit-border-radius: 50%; border-radius: 50% 50% 0 50%; -moz-box-shadow: 0 0 0 2px #a6c3cb, 0 -2px 0 3px #bfd4d9; -webkit-box-shadow: 0 0 0 2px #a6c3cb, 0 -2px 0 3px #bfd4d9; box-shadow: 0 0 0 2px #a6c3cb, 0 -2px 0 3px #bfd4d9; top: 37px; left: 25px; width: 51px; height: 51px;
}
#r8 .wheel-socket .rear { -moz-border-radius: 50% 50% 50% 0; -webkit-border-radius: 50%; border-radius: 50% 50% 50% 0; -moz-box-shadow: 0 0 0 3px #a6c3cb, 0 -3px 0 3px #bfd4d9, 0 -3px 0 8px #a6c3cb, 0 -8px 0 5px #c6d8da; -webkit-box-shadow: 0 0 0 3px #a6c3cb, 0 -3px 0 3px #bfd4d9, 0 -3px 0 8px #a6c3cb, 0 -8px 0 5px #c6d8da; box-shadow: 0 0 0 3px #a6c3cb, 0 -3px 0 3px #bfd4d9, 0 -3px 0 8px #a6c3cb, 0 -8px 0 5px #c6d8da; top: 34px; left: 210px; width: 57px; height: 57px;
}
#r8 .kit .front { position: absolute; top: 67px; left: 4px; border-style: solid; border-color: #8cb1ba #8cb1ba transparent transparent; border-width: 0 20px 6px 0;
}
#r8 .kit .front:before { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; content: " "; position: absolute; background: #c6d8da; width: 13px; height: 2px; top: -5px; left: 4px;
}
#r8 .kit .center { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; position: absolute; background: #a6c3cb; border: solid 2px #a6c3cb; border-right-width: 4px; overflow: hidden; left: 76px; bottom: 0; width: 134px; height: 22px;
}
#r8 .kit .center:before { content: " "; position: absolute; right: 0; bottom: 0; border-style: solid; border-color: transparent #8cb1ba transparent transparent; border-width: 8px 263px 0 0;
}
#r8 .kit .rear { -moz-border-radius-bottomright: 40px; -webkit-border-bottom-right-radius: 40px; border-bottom-right-radius: 40px; position: absolute; background: #8cb1ba; overflow: hidden; left: 250px; bottom: 2px; width: 28px; height: 11px;
}
#r8 .wheel { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; border: solid 3px #282c2d; z-index: 10;
}
#r8 .wheel > span { position: absolute; display: block; z-index: 10; top: 50%; right: 50%; margin-top: -2px; margin-right: 4px; width: 13px; height: 5px; border-top: solid 2px #cbdeef; border-bottom: solid 2px #cbdeef;
}
#r8 .wheel > span:first-child + * { -moz-transform: rotate(72deg); -ms-transform: rotate(72deg); -webkit-transform: rotate(72deg); transform: rotate(72deg); margin-top: -13px; margin-right: -3px;
}
#r8 .wheel > span:first-child + * + * { -moz-transform: rotate(144deg); -ms-transform: rotate(144deg); -webkit-transform: rotate(144deg); transform: rotate(144deg); margin-top: -9px; margin-right: -15px;
}
#r8 .wheel > span:first-child + * + * + * { -moz-transform: rotate(216deg); -ms-transform: rotate(216deg); -webkit-transform: rotate(216deg); transform: rotate(216deg); margin-top: 4px; margin-right: -16px;
}
#r8 .wheel > span:first-child + * + * + * + * { -moz-transform: rotate(288deg); -ms-transform: rotate(288deg); -webkit-transform: rotate(288deg); transform: rotate(288deg); margin-top: 8px; margin-right: -3px;
}
#r8 .wheel.front { -moz-box-shadow: inset 0 0 0 1px #000004, inset 0 0 0 2px #cbdeef, inset 0 0 0 3px #8fa2b1, inset 0 0 0 4px #caddee, inset 0 0 0 10px #090a0e, inset 0 0 0 13px #000004, inset 0 0 0 16px #cadcf0, inset 0 0 0 17px #90a1b1, inset 0 0 0 23px #c9def1; -webkit-box-shadow: inset 0 0 0 1px #000004, inset 0 0 0 2px #cbdeef, inset 0 0 0 3px #8fa2b1, inset 0 0 0 4px #caddee, inset 0 0 0 10px #090a0e, inset 0 0 0 13px #000004, inset 0 0 0 16px #cadcf0, inset 0 0 0 17px #90a1b1, inset 0 0 0 23px #c9def1; box-shadow: inset 0 0 0 1px #000004, inset 0 0 0 2px #cbdeef, inset 0 0 0 3px #8fa2b1, inset 0 0 0 4px #caddee, inset 0 0 0 10px #090a0e, inset 0 0 0 13px #000004, inset 0 0 0 16px #cadcf0, inset 0 0 0 17px #90a1b1, inset 0 0 0 23px #c9def1; top: 40px; left: 28px; width: 44px; height: 44px;
}
#r8 .wheel.rear { -moz-box-shadow: inset 0 0 0 1px #000004, inset 0 0 0 2px #cbdeef, inset 0 0 0 3px #8fa2b1, inset 0 0 0 4px #caddee, inset 0 0 0 12px #090a0e, inset 0 0 0 15px #000004, inset 0 0 0 18px #cadcf0, inset 0 0 0 19px #90a1b1, inset 0 0 0 23px #c9def1; -webkit-box-shadow: inset 0 0 0 1px #000004, inset 0 0 0 2px #cbdeef, inset 0 0 0 3px #8fa2b1, inset 0 0 0 4px #caddee, inset 0 0 0 12px #090a0e, inset 0 0 0 15px #000004, inset 0 0 0 18px #cadcf0, inset 0 0 0 19px #90a1b1, inset 0 0 0 23px #c9def1; box-shadow: inset 0 0 0 1px #000004, inset 0 0 0 2px #cbdeef, inset 0 0 0 3px #8fa2b1, inset 0 0 0 4px #caddee, inset 0 0 0 12px #090a0e, inset 0 0 0 15px #000004, inset 0 0 0 18px #cadcf0, inset 0 0 0 19px #90a1b1, inset 0 0 0 23px #c9def1; top: 38px; left: 215px; width: 47px; height: 47px;
}
#r8 .shadow { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; background: #010207; z-index: 0; left: 0; bottom: 0; width: 291px; height: 22px;
}
/* The animation part ;) */
.wheel { -webkit-animation: wheels-animation 0.9s cubic-bezier(0.44, 0.33, 0.46, 0.92); -moz-animation: wheels-animation 0.9s cubic-bezier(0.44, 0.33, 0.46, 0.92); -o-animation: wheels-animation 0.9s cubic-bezier(0.44, 0.33, 0.46, 0.92); animation: wheels-animation 0.9s cubic-bezier(0.44, 0.33, 0.46, 0.92); -moz-transform-origin: 50% 50% 0 50%; -ms-transform-origin: 50% 50% 0 50%; -webkit-transform-origin: 50% 50% 0 50%; transform-origin: 50% 50% 0 50%;
}
.body { -webkit-animation: body-animation 1.2s cubic-bezier(0.44, 0.33, 0.46, 0.92); -moz-animation: body-animation 1.2s cubic-bezier(0.44, 0.33, 0.46, 0.92); -o-animation: body-animation 1.2s cubic-bezier(0.44, 0.33, 0.46, 0.92); animation: body-animation 1.2s cubic-bezier(0.44, 0.33, 0.46, 0.92); -moz-transform-origin: 82% 83% 0 50%; -ms-transform-origin: 82% 83% 0 50%; -webkit-transform-origin: 82% 83% 0 50%; transform-origin: 82% 83% 0 50%;
}
.trunk .lights { -webkit-animation: lights-animation 1s ease-in-out infinite alternate; -moz-animation: lights-animation 1s ease-in-out infinite alternate; -o-animation: lights-animation 1s ease-in-out infinite alternate; animation: lights-animation 1s ease-in-out infinite alternate;
}
#r8 { -webkit-animation: r8-animation 0.9s cubic-bezier(0.44, 0.33, 0.46, 0.92); -moz-animation: r8-animation 0.9s cubic-bezier(0.44, 0.33, 0.46, 0.92); -o-animation: r8-animation 0.9s cubic-bezier(0.44, 0.33, 0.46, 0.92); animation: r8-animation 0.9s cubic-bezier(0.44, 0.33, 0.46, 0.92); -moz-transform-origin: 50% 50% 0 50%; -ms-transform-origin: 50% 50% 0 50%; -webkit-transform-origin: 50% 50% 0 50%; transform-origin: 50% 50% 0 50%;
}
@-webkit-keyframes wheels-animation { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(-720deg); -ms-transform: rotate(-720deg); -webkit-transform: rotate(-720deg); transform: rotate(-720deg); }
}
@-moz-keyframes wheels-animation { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(-720deg); -ms-transform: rotate(-720deg); -webkit-transform: rotate(-720deg); transform: rotate(-720deg); }
}
@-o-keyframes wheels-animation { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(-720deg); -ms-transform: rotate(-720deg); -webkit-transform: rotate(-720deg); transform: rotate(-720deg); }
}
@keyframes wheels-animation { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(-720deg); -ms-transform: rotate(-720deg); -webkit-transform: rotate(-720deg); transform: rotate(-720deg); }
}
@-webkit-keyframes body-animation { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 85% { -moz-transform: rotate(-1deg); -ms-transform: rotate(-1deg); -webkit-transform: rotate(-1deg); transform: rotate(-1deg); } 100% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
@-moz-keyframes body-animation { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 85% { -moz-transform: rotate(-1deg); -ms-transform: rotate(-1deg); -webkit-transform: rotate(-1deg); transform: rotate(-1deg); } 100% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
@-o-keyframes body-animation { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 85% { -moz-transform: rotate(-1deg); -ms-transform: rotate(-1deg); -webkit-transform: rotate(-1deg); transform: rotate(-1deg); } 100% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
@keyframes body-animation { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 85% { -moz-transform: rotate(-1deg); -ms-transform: rotate(-1deg); -webkit-transform: rotate(-1deg); transform: rotate(-1deg); } 100% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
@-webkit-keyframes lights-animation { 0% { background: #b01329; } 20% { background: #b01329; } 80% { background: #e3407f; } 100% { background: #e3407f; }
}
@-moz-keyframes lights-animation { 0% { background: #b01329; } 20% { background: #b01329; } 80% { background: #e3407f; } 100% { background: #e3407f; }
}
@-o-keyframes lights-animation { 0% { background: #b01329; } 20% { background: #b01329; } 80% { background: #e3407f; } 100% { background: #e3407f; }
}
@keyframes lights-animation { 0% { background: #b01329; } 20% { background: #b01329; } 80% { background: #e3407f; } 100% { background: #e3407f; }
}
@-webkit-keyframes r8-animation { 0% { -moz-transform: translateX(1000px); -ms-transform: translateX(1000px); -webkit-transform: translateX(1000px); transform: translateX(1000px); } 100% { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }
}
@-moz-keyframes r8-animation { 0% { -moz-transform: translateX(1000px); -ms-transform: translateX(1000px); -webkit-transform: translateX(1000px); transform: translateX(1000px); } 100% { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }
}
@-o-keyframes r8-animation { 0% { -moz-transform: translateX(1000px); -ms-transform: translateX(1000px); -webkit-transform: translateX(1000px); transform: translateX(1000px); } 100% { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes r8-animation { 0% { -moz-transform: translateX(1000px); -ms-transform: translateX(1000px); -webkit-transform: translateX(1000px); transform: translateX(1000px); } 100% { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); }
}

Audi R8 in HTML/CSS - Script Codes JS Codes

/*
Audi R8
Made by Kevin Jannis (@kevinjannis)
View more at www.janniskev.in
Inspired by: https://dribbble.com/shots/1344020-Audi-R8
*/
Audi R8 in HTML/CSS - Script Codes
Audi R8 in HTML/CSS - Script Codes
Home Page Home
Developer Kevin Jannis
Username kevinjannis
Uploaded December 25, 2022
Rating 4
Size 7,579 Kb
Views 8,096
Do you need developer help for Audi R8 in HTML/CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin Jannis (kevinjannis) Script Codes
Name
Random Access Memories
V for Vendetta
Adjusting your settings.
Vivid CSS3 Spinner
The world with CSS3 Transforms
Flat Star Wars
The Simpsons Wall Painting
DC vs. Marvel
Earth in a single HTML element
Curated collection of gradient backgrounds
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!