前言
前兩天我剛發布了一篇CSS3實現小黃人動畫的博客，但是實現的CSS3動畫是基於我在站酷網找到的一張小黃人的jpg格式圖片，並自行用PS摳出需要實現動畫的部分，最後才完成的動畫效果。但是，其實我的初衷是想體驗一下用圖片做動畫的趕腳，但是找不到素材，才無奈用了最笨的方法來滿足自己的需求，本想勉強能看就行了。可是呢，還是抵不住自己內心的完美，於是乎，用了一個晚上用CSS3畫出了小小兵再實現類似的動畫效果。
正文
#OK，大家看一下下面兩張圖有什麼不同：
當然，很多人會說，明顯大小不同，嘴巴，頭髮也是不一樣的。但其實最大的不同是，用一個形像一點的例子就是：這是兩個孩子，第一個是從超市貨架上拿的，另外一個是我自己生的。怎麼生呢？ ——用CSS3！
那麼生下來得會動啊，不然就夭折了，所以，我就多拍了幾個，就變成這樣子了：
#怎麼樣？雖然手腳動畫還是不怎麼神似，但人類聰明大腦還是看得出啥意思的吧！今天就讓我們一起學習如何生一個小小兵來。
首先，還是直接把HTML結構放出來給大家打量打量：
<p><!-- 容器 --> </p><p><!-- 小黄人 --> </p><p><!-- 身体 --> </p><p><!-- 裤子 --> </p><p><!-- 吊带 --> </p><p></p> <p></p> <p></p><!-- 裤子突出的矩形部分 --> <p></p><!-- 裤袋 --> <!-- 三条线 --> <span></span> <span></span> <span></span> <p><!-- 头发 --> <span></span> <span></span> </p> <p><!-- 眼睛 --> </p><p><!-- 左眼 --> </p><p> </p><p></p> <p><!-- 右眼 --> </p><p> </p><p></p> <p><!-- 嘴巴 --> </p><p></p> <p><!-- 双手 --> </p><p></p> <p></p> <p><!-- 双脚 --> </p><p></p> <p></p> <p></p><!-- 脚底阴影 -->
好的，每一處我都標明了它的用途，大家可以稍微理解一下，在頭腦裡有一個大概的模型或層次結構。
接下來就是猛料了。 。 。我將分步講解，一步一步實現：
首先對容器和整體做一些簡單的樣式設定：
body{
margin: 0;
padding:0;
}
.wrapper{
width: 300px;
margin:100px auto;
}
.litteH{
position: relative;
}
.bodyH{
position: absolute;
width: 240px;
height: 400px;
border:5px solid #000;
border-radius: 115px;
background: rgb(249,217,70);
overflow: hidden;
z-index: 2;
}
其中.bodyH主要就是繪製小小兵的身體，身體的比例很重要，現在運行看一下效果：
#OK，身體已經有了，現在趕緊給它穿個褲子吧！
.bodyH .condoleBelt{
position: absolute;
}
.bodyH .trousers{
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
border-top: 6px solid #000;
background: rgb(32,116,160);
}
.trousers_top{
width: 160px;
height: 60px;
border:6px solid #000;
border-bottom: none;
border-radius: 0 0 5px 5px;
background: rgb(32,116,160);
position: absolute;
bottom: 100px;
left:34px;
}
其中.trousers_top就是長方形部分，那麼穿完褲子是什麼樣子的呢？
現在怎麼看都像一顆膠囊，不行，趕緊修飾修飾，給它一個吊帶，不然褲子會掉呢：
.bodyH .condoleBelt .left,
.bodyH .condoleBelt .right{
width: 100px;
height: 16px;
border:5px solid #000;
background: rgb(32,116,160);
position: absolute;
top:-90px;
left:-35px;
z-index: 2;
-webkit-transform:rotate(45deg);
}
.bodyH .condoleBelt .left{
top:-88px;
left:165px;
-webkit-transform:rotate(-45deg);
}
.bodyH .condoleBelt .left:after,
.bodyH .condoleBelt .right:after{
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: #000;
position: absolute;
top:4px;
left:88px;
}
.bodyH .condoleBelt .left:after{
left:5px;
}
這一塊主要就是實現兩個吊帶，左右各一條，然後我使用：after偽元素來實現吊帶上的小黑點：
咦，開始有模有樣了，接下來我們一鼓作氣把褲袋和一下修飾的邊邊給實現了：
.pocket{
width: 60px;
height: 45px;
border:6px solid #000;
border-radius: 0px 0px 25px 25px;
position: absolute;
bottom:65px;
left:84px;
}
.line_right{
width: 30px;
height: 30px;
border-bottom-left-radius: 100px;
border-bottom:6px solid #000;
border-left:6px solid #000;
position: absolute;
left: 0;
bottom:60px;
-webkit-transform:rotate(-75deg);
}
.line_left{
width: 30px;
height: 30px;
border-bottom-right-radius: 100px;
border-bottom:6px solid #000;
border-right:6px solid #000;
position: absolute;
right: 0;
bottom:63px;
-webkit-transform:rotate(75deg);
}
.line_bottom{
height: 40px;
border:3px solid #000;
border-radius: 3px;
position: absolute;
left:118px;
bottom: 0px;
}
先看效果圖：
#OK，兩個注意點說一下：
#1 .我把褲子放在身體裡面，然後給.bodyH添加overflow:hidden，這樣我們就不用去多慮溢出怎麼辦，而且很輕鬆就能實現褲子的效果；
2.可以看到褲子兩邊有兩條有弧度的曲線段，我是透過給矩形某一個角實現圓角效果，然後只設定與這個角相鄰的兩邊的邊框樣式，然後旋轉一下角度就實現這個效果了，當然只能實現簡單一點的效果。
好的，我們繼續，接下來先實現以下眼睛部分吧：
.eyes{
position: relative;
z-index: 3;
}
.eyes .leftEye,.eyes .rightEye{
width: 85px;
height: 85px;
border-radius: 50%;
border:6px solid #000;
background: #fff;
position: absolute;
top:60px;
left: 27px;
}
.eyes .leftEye{
left: 124px;
}
.eyes .leftEye .left_blackEye,
.eyes .rightEye .right_blackEye{
width: 40px;
height: 40px;
border-radius: 50%;
background: #000;
position: absolute;
top:24px;
left:22px;
}
.eyes .leftEye .left_blackEye .left_white,
.eyes .rightEye .right_blackEye .right_white{
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
position: absolute;
top:7px;
left:17px;
}
.eyes .leftEye .left_blackEye .left_white{
top:4px;
left:17px;
}
.eyes .leftEye:after,
.eyes .rightEye:after{
content: '';
width: 28px;
height: 18px;
background: #000;
position: absolute;
left:-30px;
top:37px;
-webkit-transform:skewX(20deg) rotate(7deg);
}
.eyes .leftEye:after{
left:89px;
top:37px;
-webkit-transform:skewX(-20deg) rotate(-7deg);
}
眼睛部分還是挺好實現的，先畫眼鏡，然後黑眼珠，再畫白點，最後我才畫的眼鏡框，眼睛框我是用：after偽元素實現的。效果圖如下：
#嘴巴是最困惑我的，但還是最後還是能實現：
.mouse{
position: relative;
}
.mouse .mouse_shape{
width: 55px;
height: 35px;
border:5px solid #000;
border-bottom-left-radius: 30px;
background: #fff;
position: absolute;
top:175px;
left:98px;
z-index: 3;
-webkit-transform:rotate(-35deg);
}
首先也是透過矩形其中一個角實現圓角來模擬嘴巴形狀，再加以旋轉：
結果是這樣的，那麼想要達到我們預期的效果，就需要把上半部給遮掉，所以我用：after偽元素來實現遮罩效果：
.mouse .mouse_shape:after{
content: '';
width: 70px;
height: 32px;
border-bottom:5px solid #000;
border-radius:35px 26px 5px 5px;
background: red;
position: absolute;
top:-16px;
left:3px;
-webkit-transform:rotate(34deg);}
這個地方就需要慢慢調到合適的位置，模擬圖如下：
红色部分就是遮罩了，也是一个矩形，设置了底边框，实现和嘴巴下半部分形成闭合效果，现在我们就可以把颜色改成肤色就行了：
.mouse .mouse_shape:after{
content: '';
width: 70px;
height: 32px;
border-bottom:5px solid #000;
border-radius:35px 26px 5px 5px;
background: rgb(249,217,70);
position: absolute;
top:-16px;
left:3px;
-webkit-transform:rotate(34deg);
-webkit-animation: mouse_mask 5s ease-in-out infinite;
}
效果图如下：
接下来实现双手部分，这一部分不难，就是两个圆角矩形，旋转了角度，然后层级低于身体的层级就行，然后再通过：after伪元素实现胳膊关节处就搞定了。
.hands{
position: relative;
}
.hands .leftHand,
.hands .rightHand{
width: 80px;
height: 80px;
border:6px solid #000;
border-radius: 25px;
background: rgb(249,217,70);
position: absolute;
top:220px;
left:-23px;
-webkit-transform:rotate(40deg);
}
.hands .leftHand{
left:182px;
top:220px;
-webkit-transform:rotate(-40deg);
}
.hands .leftHand:after,
.hands .rightHand:after{
content: '';
width: 6px;
border:3px solid #000;
border-radius: 3px;
position: absolute;
left:13px;
top:50px;
-webkit-transform:rotate(90deg);
}
.hands .leftHand:after{
left:53px;
top:50px;
-webkit-transform:rotate(-90deg);
}
效果图如下：
再接下来就是双脚的部分了，主要就是鞋面的设计，我是通过一个矩形，然后设置不同的圆角值，加上一点点的旋转来模拟的，这一块的话，怎么做我都觉得不是很像，所以最后差不多我就妥协了。
.feet{
position: relative;
}
.feet .left_foot,
.feet .right_foot{
width: 36px;
height: 50px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 9px;
background: #000;
position: absolute;
top: 406px;
left:88px;
-webkit-transform-origin: right top;
}
.feet .left_foot{
border-bottom-right-radius: 9px;
border-bottom-left-radius: 6px;
left:130px;
-webkit-transform-origin: left top;
}
.feet .left_foot:after,
.feet .right_foot:after{
content: '';
width: 60px;
height: 35px;
border-radius: 20px 10px 21px 15px;
background: #000;
position: absolute;
left:-36px;
top:14.4px;
-webkit-transform:rotate(5deg);
}
.feet .left_foot:after{
border-radius: 10px 20px 15px 21px;
left:13px;
-webkit-transform:rotate(-5deg);
}
效果图如下：
本来是不想画头发的，感觉怪难的，最后尝试了一下，还是能出个样子，那就添加上去吧。原理跟裤子左右两边的实现原理是一样的，只是参数值不一样罢了，大家参考代码琢磨一下：
.hair{
position: relative;
}
.left_hair_one{
width: 130px;
height: 100px;
border-radius: 50%;
border-top:8px solid #000;
position: absolute;
left:17px;
top:-17px;
-webkit-transform:rotate(27deg);
}
.left_hair_two{
width: 80px;
height: 80px;
border-radius: 50%;
border-top:6px solid #000;
position: absolute;
left:45px;
top:-10px;
-webkit-transform:rotate(15deg);
}
补充脚底阴影部分：
.groundShadow{
width: 200px;
height: 2px;
border-radius: 50%;
background: rgba(0,0,0,0.3);
box-shadow: 0 0 2px 4px rgba(0,0,0,0.3);
position: relative;
top: 455px;
left:25px;
}
最后就是最初的效果了：
这时大家可能会问：然后呢？不是还会动的吗？
是的，这里我就大概讲一下实现的思路吧：
1.头发：头发我想实现的是被小风轻轻地吹起来，然后很快就塌下去，所以吹起和下塌分配的时间很关键；
2.眼睛：眼睛我设想的场景是小黄人在悠闲地走路，然后不时左右看一下两边的风景，所以眼睛转动很悠哉，所以分配的时间可以稍微长一点点；
3.嘴巴：让嘴巴动起来确实比较难，因为要动的话，遮罩也得实时跟着改变，而且不能露馅，所以最后实现的是当它往左边看了一下之后卖了一下萌；
4.双手和双脚：这部分确实很难逼真，本来脚就不是正常的走路状态，所以只能按卓别林老爷爷的走路方式模拟一下，而且左右脚动作是紧接实现而不是同步实现。双手的话，我是简单模拟人在走路时有摆手的自然惯性，而且是左脚配右手，右脚配左手。考虑到它的双手是放在背后的，所以我的摆动幅度设置为非常小，有效果但不明显。
OK，我就直接把动画代码放上来吧：
.left_hair_one{
-webkit-animation: lefthair 2s ease-in-out infinite;
}
@-webkit-keyframes lefthair{
0%,25%,31%,100%{
}
30%{
-webkit-transform: rotate(31deg) translate3d(-3px,-1px,0);
}
}
.eyes .leftEye .left_blackEye,
.eyes .rightEye .right_blackEye{
-webkit-animation: blackeye 5s ease-in infinite;
}
@-webkit-keyframes blackeye{
0%,20%,50%,70%,100%{
-webkit-transform: translateX(0px);
}
30%,40%{
-webkit-transform: translateX(15px);
}
80%,90%{
-webkit-transform: translateX(-15px);
}
}
.eyes .leftEye .left_blackEye .left_white,
.eyes .rightEye .right_blackEye .right_white{
-webkit-animation: whiteeye 5s ease-in-out infinite;
}
@-webkit-keyframes whiteeye{
0%,20%,50%,70%,100%{
-webkit-transform: translateX(0px);
}
30%,40%{
-webkit-transform: translate3d(3px,4px,0);
}
80%,90%{
-webkit-transform: translate3d(-15px,4px,0);
}
}
.mouse .mouse_shape{
-webkit-animation: mouse 5s ease-in-out infinite;
}
@-webkit-keyframes mouse{
40%,43%{
width: 45px;
height: 25px;
top:180px;
}
0%,35%,48%,100%{
width: 55px;
height: 35px;
top:175px;
-webkit-transform:rotate(-35deg);
}
}
.mouse .mouse_shape:after{
-webkit-animation: mouse_mask 5s ease-in-out infinite;
}
@-webkit-keyframes mouse_mask{
40%,43%{
width: 60.5px;
top:-19.3px;
left:1.5px;
}
0%,35%,48%,100%{
width: 70px;
top:-16px;
left:3px;
-webkit-transform:rotate(33deg);
}
}
.hands .rightHand{
-webkit-animation:rightHand .8s ease-in-out infinite;
}
@-webkit-keyframes rightHand{
0%,50%,100%{
-webkit-transform: rotate(40deg);
}
30%{
-webkit-transform: rotate(37deg) translateX(1px);
}
}
.hands .leftHand{
-webkit-animation:leftHand .8s ease-in-out infinite;
}
@-webkit-keyframes leftHand{
0%,50%,100%{
-webkit-transform: rotate(-40deg);
}
80%{
-webkit-transform: rotate(-37deg) translateX(-1px);
}
}
.feet .right_foot{
-webkit-animation: rightfoot .8s ease-in-out infinite;
}
@-webkit-keyframes rightfoot{
0%,50%,100%{
-webkit-transform: rotate(0deg);
}
80%{
-webkit-transform: rotate(10deg);
}
}
.feet .left_foot{
-webkit-animation: leftfoot .8s ease-in-out infinite;
}
@-webkit-keyframes leftfoot{
0%,50%,100%{
-webkit-transform: rotate(0deg);
}
30%{
-webkit-transform: rotate(-10deg);
}
}
篇幅比较大，代码看多了会乱，如果觉得自己懒得整理的话，可以直接到我的github上下载这个简单又好玩的案例吧：https://github.com/JR93/littleHuang
谢谢！
以上是純CSS3畫出小小兵並實現動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
@rules具有多少特異性，例如@keyframes和@media？Apr 18, 2025 am 11:34 AM前幾天我得到了這個問題。我的第一個想法是：奇怪的問題！特異性是關於選擇者的，而在符號不是選擇器，那麼...無關緊要？
在NUXT應用程序中創建動態路由Apr 18, 2025 am 10:53 AM在這篇文章中，我們將使用我構建和部署的電子商務商店演示來進行Netlify，以展示如何為傳入數據製作動態路線。這是一個公平的
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
PhpStorm Mac 版本
最新（2018.2.1 ）專業的PHP整合開發工具
Atom編輯器mac版下載
最受歡迎的的開源編輯器
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
