How to Make Pure CSS3 Galloping Horse Animation Special Effects

How to Make Pure CSS3 Galloping Horse Animation Special Effects: BY Mark13 Nov,2020; Tags:
CSS3 Animation

Introduction

This time we are also sharing a pure CSS3 galloping horse animation special effect. Compared with the previous one, it increases the dusty effect when running. At the same time, when you click on the galloping horse, a detailed analysis diagram of the animation will appear.

How to Make Pure CSS3 Galloping Horse Animation Special Effects

Instructions

HTML Body Code

<div class="front-leg right">
			<div class="shoulder">
				<div class="upper">
					<div class="knee">
						<div class="lower">
							<div class="ankle">
								<div class="foot">
									<div class="hoof"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="back-leg right">
			<div class="top">
				<div class="thigh">
					<div class="lower-leg">
						<div class="foot">
							<div class="hoof"></div>
						</div>
					</div>
				</div>
			</div>
		</div>

Css Code

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

label {
  cursor: pointer;
}

.dust {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(((100vh - var(--horse-height)) / 2) + 0.02rem);
  overflow: hidden;
}

.floor {
  background-color: var(--color-floor);
  background: linear-gradient(9deg, #e8d9be 0%, #A95108 100%);
  position: fixed;
  top: calc(50vh + (var(--horse-height) / 2) - 0.5rem);
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.dust .particle {
  background-color: var(--color-dust);
  width: 0.05rem;
  height: 0.05rem;
  border-radius: 50%;
  position: absolute;
  border: 1px dashed var(--outlines);
  top: calc(50vh + (var(--horse-height) / 2) - 0.05rem);
  left: calc(50vw - (var(--horse-width) / 2) + (var(--horse-width) * 0.15));
}

VIEW NOW