特殊効果を実現する CSS ステッピング アニメーション

プロジェクト紹介:

本篇文章将向大家介绍，如何通过CSS步进动画实现僵尸运行特效：

プロジェクト シーン: 必要な DOM ノードは 1 つだけで、純粋な CSS はアニメーション ゾンビの動きをステップ実行する特殊効果を実現します。

---

問題の説明

提示：纯CSS实现僵尸运动：

ゾンビの動きの特殊効果、前に小さなゾンビが歩いている、他の人が JavaScript を介して特殊効果を実現しているのを見ました。そこで、CSS だけでゾンビの動きを実現する特殊効果を書いてみました. ナンセンスなことは言わずに、レンダリングとコードをアップロードするだけです.

実行結果:

ソースコード：

HTMLコード

	<div class="box"></div>

CSSコード

			.box{
				width: 200px;
				height: 312px;
				background: url(img/walkingdead.png) no-repeat;
				animation: name 1s steps(10,end) infinite;
			}
			/* 定义关键帧 */
			@keyframes name{
				form{
					/* 背景定位 */
					background-position:  0;
				}
				to{
					background-position: -2000px 0;
				}
			}

お読みのとおり、ゾンビの動きの効果を実現するために、DOM ノードは 1 つだけで、いくつかの CSS が追加されています。

分析:

上記のCSSコードからわかるように、背景画像を参照し、キーフレームを定義し、適切な高さと幅を設定し、背景画像の配置を設定することで、ゾンビの動きを実現しています。

背景画像を添付する:

上記のコードについて質問がある場合は、以下にコメントしてください。ありがとうございます!