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.
Advertisement
<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>
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)); }
Advertisement