Horse ride carousel flat design
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Horse ride carousel flat design</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>body {
height: 100%;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #441151;
}
.wrapper {
perspective: 0px;
background-image: url('http://svgur.com/i/6f.svg');
width: 850px;
height: 650px;
}
#lights {
position: absolute;
width: 850px;
height: 650px
}
#stars {
position: absolute;
width: 850px;
height: 650px;
}
.star-bg {
animation: stars-animation 3s linear infinite;
}
.star-bg.big {
animation-delay: 1.5s;
}
@keyframes stars-animation {
0% {
opacity: .5;
}
50% {
opacity: 1;
}
100% {
opacity: .5
}
}
.light-bulb {
animation: light-animation 3s linear infinite;
}
@keyframes light-animation {
0% {
r: 30;
}
50% {
r: 40;
}
100% {
r: 30;
}
}
#carousel {
width: 850px;
height: 650px;
text-align: center;
position: relative;
transform-style: preserve-3d;
}
#horse-ride img {
max-width: 550px;
display: inline-block;
}
#horse-ride {
transform-style: preserve-3d;
transform: translate3d(0, 0, 100px);
}
#pole {
width: 25px;
height: 195px;
background-image: url('http://svgur.com/i/4k.svg');
position: absolute;
left: 0;
background-size: cover;
right: 0;
margin-left: auto;
margin-right: auto;
top: 285px;
animation: pole-animation 3s linear infinite;
transform: translate3d(0, 0, -50px);
}
@keyframes pole-animation {
0% {
background-position: bottom;
}
100% {
background-position: top;
}
}
#cylinder {
width: 100px;
transform-style: preserve-3d;
position: absolute;
top: 290px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
transform: translate3d(0, 0, -100px);
}
#fade-black {
width: 190px;
height: 164px;
position: absolute;
background: rgba(0, 0, 0, 0.4);
top: 286px;
left: 330px;
transform: translate3d(0, 0, -120px);
}
#horses {
transform-style: preserve-3d;
animation: spin 15s infinite linear;
transform-origin: center;
transform-box: fill-box;
}
@keyframes spin {
0% {
transform: rotateY(-360deg);
}
}
#horses div {
background-size: cover;
position: absolute;
height: 155px;
width: 95px;
transform-origin: center;
background-image: url('http://svgur.com/i/6e.svg');
}
.hors {
animation: horses-animation 3s linear infinite;
}
.hors.down {
animation-delay: 1.5s
}
@keyframes horses-animation {
50% {
margin-top: -30px;
}
}
#horses .a {
transform: rotateY(0deg) translateZ(100px);
animation-delay: .2s;
}
#horses .b {
transform: rotateY(60deg) translateZ(100px);
}
#horses .c {
transform: rotateY(120deg) translateZ(100px);
}
#horses .d {
transform: rotateY(180deg) translateZ(100px);
}
#horses .e {
transform: rotateY(240deg) translateZ(100px);
}
#horses .f {
transform: rotateY(300deg) translateZ(100px);
}</style>
</head>
<body>
<div class="wrapper">
<div id="stars"><svg id="stars" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<g id="stars-2" data-name="stars">
<g id="rect">
<g id="star" class="star-bg big">
<path d="M208.68,108.13a4.5,4.5,0,0,1-2.87-2.87l-1.12-3.4-1.12,3.4a4.5,4.5,0,0,1-2.87,2.87l-3.4,1.12,3.4,1.12a4.5,4.5,0,0,1,2.87,2.87l1.12,3.4,1.12-3.4a4.5,4.5,0,0,1,2.87-2.87l3.4-1.12Z" fill="#ffaaa3"/>
<path d="M204.7,101.87l1.12,3.4a4.5,4.5,0,0,0,2.87,2.87l3.4,1.12-3.4,1.12a4.5,4.5,0,0,0-2.87,2.87l-1.12,3.4V101.87Z" fill="#ee85b5"/>
</g>
<g id="star-2" class="star-bg big" data-name="star">
<path d="M95.68,194.13a4.5,4.5,0,0,1-2.87-2.87l-1.12-3.4-1.12,3.4a4.5,4.5,0,0,1-2.87,2.87l-3.4,1.12,3.4,1.12a4.5,4.5,0,0,1,2.87,2.87l1.12,3.4,1.12-3.4a4.5,4.5,0,0,1,2.87-2.87l3.4-1.12Z" fill="#ffaaa3"/>
<path d="M91.7,187.87l1.12,3.4a4.5,4.5,0,0,0,2.87,2.87l3.4,1.12-3.4,1.12a4.5,4.5,0,0,0-2.87,2.87l-1.12,3.4V187.87Z" fill="#ee85b5"/>
</g>
<g id="star-3" class="star-bg big" data-name="star">
<path d="M295.68,64.13a4.5,4.5,0,0,1-2.87-2.87l-1.12-3.4-1.12,3.4a4.5,4.5,0,0,1-2.87,2.87l-3.4,1.12,3.4,1.12a4.5,4.5,0,0,1,2.87,2.87l1.12,3.4,1.12-3.4a4.5,4.5,0,0,1,2.87-2.87l3.4-1.12Z" fill="#ffaaa3"/>
<path d="M291.7,57.87l1.12,3.4a4.5,4.5,0,0,0,2.87,2.87l3.4,1.12-3.4,1.12a4.5,4.5,0,0,0-2.87,2.87l-1.12,3.4V57.87Z" fill="#ee85b5"/>
</g>
<g id="star-4" class="star-bg big" data-name="star">
<path d="M379.68,160.13a4.5,4.5,0,0,1-2.87-2.87l-1.12-3.4-1.12,3.4a4.5,4.5,0,0,1-2.87,2.87l-3.4,1.12,3.4,1.12a4.5,4.5,0,0,1,2.87,2.87l1.12,3.4,1.12-3.4a4.5,4.5,0,0,1,2.87-2.87l3.4-1.12Z" fill="#ffaaa3"/>
<path d="M375.7,153.87l1.12,3.4a4.5,4.5,0,0,0,2.87,2.87l3.4,1.12-3.4,1.12a4.5,4.5,0,0,0-2.87,2.87l-1.12,3.4V153.87Z" fill="#ee85b5"/>
</g>
<g id="star-5" class="star-bg big" data-name="star">
<path d="M498.68,128.13a4.5,4.5,0,0,1-2.87-2.87l-1.12-3.4-1.12,3.4a4.5,4.5,0,0,1-2.87,2.87l-3.4,1.12,3.4,1.12a4.5,4.5,0,0,1,2.87,2.87l1.12,3.4,1.12-3.4a4.5,4.5,0,0,1,2.87-2.87l3.4-1.12Z" fill="#ffaaa3"/>
<path d="M494.7,121.87l1.12,3.4a4.5,4.5,0,0,0,2.87,2.87l3.4,1.12-3.4,1.12a4.5,4.5,0,0,0-2.87,2.87l-1.12,3.4V121.87Z" fill="#ee85b5"/>
</g>
<g id="star-6" class="star-bg big" data-name="star">
<path d="M653.68,139.13a4.5,4.5,0,0,1-2.87-2.87l-1.12-3.4-1.12,3.4a4.5,4.5,0,0,1-2.87,2.87l-3.4,1.12,3.4,1.12a4.5,4.5,0,0,1,2.87,2.87l1.12,3.4,1.12-3.4a4.5,4.5,0,0,1,2.87-2.87l3.4-1.12Z" fill="#ffaaa3"/>
<path d="M649.7,132.87l1.12,3.4a4.5,4.5,0,0,0,2.87,2.87l3.4,1.12-3.4,1.12a4.5,4.5,0,0,0-2.87,2.87l-1.12,3.4V132.87Z" fill="#ee85b5"/>
</g>
</g>
<g id="dots">
<circle class="star-bg small" cx="419.81" cy="84.29" r="2.62" fill="#ff958c"/>
<circle class="star-bg small" cx="478.81" cy="203.29" r="2.62" fill="#ff958c"/>
<circle class="star-bg small" cx="309.28" cy="147.62" r="2.62" fill="#ff958c"/>
<circle class="star-bg small" cx="85.55" cy="65.24" r="2.62" fill="#ff958c"/>
<circle class="star-bg small" cx="717.52" cy="175.5" r="2.62" fill="#ff958c"/>
<circle class="star-bg small" cx="582.87" cy="66.63" r="2.62" fill="#ff958c"/>
<circle class="star-bg small" cx="702.57" cy="98.13" r="2.62" fill="#ff958c"/>
</g>
</g>
</svg>
</div>
<div id="lights"><svg id="lights" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600">
<defs>
<radialGradient id="radial-gradient" cx="205.17" cy="270.39" r="41.14" gradientUnits="userSpaceOnUse">
<stop offset="0.01" stop-color="#ff958c"/>
<stop offset="0.18" stop-color="#ff958c" stop-opacity="0.77"/>
<stop offset="0.41" stop-color="#ff958c" stop-opacity="0.5"/>
<stop offset="0.61" stop-color="#ff958c" stop-opacity="0.28"/>
<stop offset="0.78" stop-color="#ff958c" stop-opacity="0.13"/>
<stop offset="0.92" stop-color="#ff958c" stop-opacity="0.03"/>
<stop offset="1" stop-color="#ff958c" stop-opacity="0"/>
</radialGradient>
<radialGradient id="radial-gradient-2" cx="628.17" cy="270.39" r="41.14" xlink:href="#radial-gradient"/>
</defs>
<g id="light1">
<g>
<path d="M202.39,400l0.12,0h2.66V293.53h-2.78V400Z" fill="#bf7069"/>
<path d="M202.39,400a2.77,2.77,0,0,0-2.66,2.76v12.84a2.88,2.88,0,0,1,.53-0.11h4.91V400h-2.66Z" fill="#b36488"/>
<path d="M200.26,415.48a2.88,2.88,0,0,0-.53.11,3,3,0,0,0-2.52,2.94v33h8v-36h-4.91Z" fill="#653162"/>
<path d="M200.44,286.88H198a2.5,2.5,0,0,0-2.38,2.6v1.44a2.5,2.5,0,0,0,2.38,2.6h7.14v-6.64h-4.73Z" fill="#441b3c"/>
</g>
<g>
<path d="M207.21,400l-0.12,0h-2.66V293.53h2.78V400Z" fill="#bf7069"/>
<path d="M207.21,400a2.77,2.77,0,0,1,2.66,2.76v12.84a2.88,2.88,0,0,0-.53-0.11h-4.91V400h2.66Z" fill="#b36488"/>
<path d="M209.34,415.48a2.88,2.88,0,0,1,.53.11,3,3,0,0,1,2.52,2.94v33h-8v-36h4.91Z" fill="#653162"/>
<path d="M209.16,286.88h2.41a2.5,2.5,0,0,1,2.38,2.6v1.44a2.5,2.5,0,0,1-2.38,2.6h-7.14v-6.64h4.73Z" fill="#441b3c"/>
</g>
<circle class="light-bulb" cx="205.17" cy="270.39" r="41.14" fill="url(#radial-gradient)"/>
<circle cx="205.17" cy="270.39" r="17.93" fill="#ffaaa3" opacity="0.8"/>
<path d="M196.69,260c-0.6-.79-3.16-0.05-3.93.58s-2.57,3.9-1.53,4.42,2.93-.52,3.94-0.62C196.44,264.29,197.46,261.05,196.69,260Z" fill="#ffaaa3"/>
</g>
<g id="light2">
<g>
<path d="M625.39,400l0.12,0h2.66V293.53h-2.78V400Z" fill="#bf7069"/>
<path d="M625.39,400a2.77,2.77,0,0,0-2.66,2.76v12.84a2.88,2.88,0,0,1,.53-0.11h4.91V400h-2.66Z" fill="#b36488"/>
<path d="M623.26,415.48a2.88,2.88,0,0,0-.53.11,3,3,0,0,0-2.52,2.94v33h8v-36h-4.91Z" fill="#653162"/>
<path d="M623.44,286.88H621a2.5,2.5,0,0,0-2.38,2.6v1.44a2.5,2.5,0,0,0,2.38,2.6h7.14v-6.64h-4.73Z" fill="#441b3c"/>
</g>
<g>
<path d="M630.21,400l-0.12,0h-2.66V293.53h2.78V400Z" fill="#bf7069"/>
<path d="M630.21,400a2.77,2.77,0,0,1,2.66,2.76v12.84a2.88,2.88,0,0,0-.53-0.11h-4.91V400h2.66Z" fill="#b36488"/>
<path d="M632.34,415.48a2.88,2.88,0,0,1,.53.11,3,3,0,0,1,2.52,2.94v33h-8v-36h4.91Z" fill="#653162"/>
<path d="M632.16,286.88h2.41a2.5,2.5,0,0,1,2.38,2.6v1.44a2.5,2.5,0,0,1-2.38,2.6h-7.14v-6.64h4.73Z" fill="#441b3c"/>
</g>
<circle class="light-bulb" cx="628.17" cy="270.39" r="41.14" fill="url(#radial-gradient-2)"/>
<circle cx="628.17" cy="270.39" r="17.93" fill="#ffaaa3" opacity="0.8"/>
<path d="M619.69,260c-0.6-.79-3.16-0.05-3.93.58s-2.57,3.9-1.53,4.42,2.93-.52,3.94-0.62C619.44,264.29,620.46,261.05,619.69,260Z" fill="#ffaaa3"/>
</g>
</svg>
</div>
<div id="carousel">
<div id="horse-ride">
<svg id="ground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<g>
<path d="M183.77,523a16.5,16.5,0,0,1,0-33H616.23a16.5,16.5,0,0,1,0,33H183.77Z" fill="#773069"/>
<rect x="151" y="451" width="499" height="40" rx="16.26" ry="16.26" transform="translate(801 942) rotate(180)" fill="#883677"/>
</g>
<g id="carousel-2" data-name="carousel">
<path d="M401,191.7s0-4.82,0-14.45c2.59,0.89,6.22,2.65,8.89,2.65,3.26,0,7.15-1.83,10.34-2.65l-4.78,5.26,6,2.15c-5.38,4.92-13.47,1.32-20.23.51l0.05,6.53H401Z" fill="#b257b0"/>
<polygon points="401.13 187 288.44 269 325.69 269 325.85 269 363.23 269 363.39 269 400.77 269 400.92 269 401.13 269 438.79 269 438.94 269 476.32 269 476.48 269 513.73 269 401.13 187" fill="#ee85b5"/>
<polygon points="438.79 269.05 438.94 269.05 476.32 269.05 476.48 269.05 513.73 269.05 401.13 187.06 401.13 269.05 438.79 269.05" fill="#ca61c3"/>
<path d="M274.71,443l9.68-13.91H402.13v22.19H279.85C275.15,451.27,272.26,446.62,274.71,443Z" fill="#ee85b5"/>
<path d="M525.31,443l-9-13.91H401v22.19H520.26C524.88,451.27,527.72,446.62,525.31,443Z" fill="#ca61c3"/>
<polygon points="516.31 428.45 516.31 417.92 400.05 417.92 400.05 429.08 516.31 429.08 516.31 428.45" fill="#883677"/>
<polygon points="284.39 428.45 284.39 417.92 401.13 417.92 401.13 429.08 284.39 429.08 284.39 428.45" fill="#883677"/>
<path d="M476.16,269H288.44c0,10,8.41,19,18.78,19A18.9,18.9,0,0,0,326,269a18.76,18.76,0,0,0,37.52.61A18.9,18.9,0,0,0,382.25,288h0.1a18.9,18.9,0,0,0,18.77-19c0,9,6.8,19,18.79,19a18.88,18.88,0,0,0,18.73-18.21A18.89,18.89,0,0,0,457.39,288c9.61,0,18.5-9.36,18.82-18.34A18.9,18.9,0,0,0,495,288c10.37,0,18.78-9,18.78-19H476.16Z" fill="#883677"/>
</g>
</svg>
</div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment