CSS3模拟小仓鼠一直奔跑的动画特效(实例代码)

最近在丽泽桥的花鸟虫鱼市场看见小仓鼠一直在奔跑，觉得它好累啊，但是却又乐此不疲的在跑着，就像我们这些打工族一样。之前见过有人把手机放在小仓鼠的滚轮上记步数，也是挺聪明的。今天就通过CSS3来实现一只一直奔跑着的小仓鼠。

1. 实现思路

本文中的小仓鼠并非一个图片，而是CSS3制作而成，看上去很有意思的一个动画，但却是多个CSS3属性的组合而成。包含了

• :root的公共样式定义
• radial-gradient复合背景色值的追加
• animation的多个动画组合
• 为了组合成小仓鼠的transform旋转使用
• border-radius的复合计算等

2.  圆圈的实现

小仓鼠要围绕着圆圈一直跑，而背景要置于页面背景之上，而且中间的滚动指针，小仓鼠，都会置于圆圈之上，所以定位的设定和层级的设定是重点

border: 10px solid red; z-index: 2; border-radius: 50%;

3.  滚动指针的实现

指针明显是用到了旋转，而布局并没有采用堆叠HTML元素的方式，而是采用radial-gradient背景追加的效果

background: radial-gradient( 100% 100% at center, hsl(0, 37%, 26%) 4.8%, hsla(0, 31%, 20%, 0) 5%), linear-gradient(hsla(0, 37%, 31%, 0) 46.9%, hsl(0, 40%, 32%) 47% 52.9%, hsla(0,0%,65%,0) 53%) 50% 50% / 99% 99% no-repeat;

 然后再通过animation旋转的方式，使指针更像是一个钟表的指针在走，但效果是这样，我们都知道，其实是这个元素在不停的旋转

@keyframes spoke { from { transform: rotate(0); } to { transform: rotate(-1turn); } }

4. 小仓鼠身体的制作形成

这里的小仓鼠并没有使用图片，因为它的小腿得使劲儿的跑，使劲儿的蹬，所以要做活，不能使用静态图片的方式。那么头部和身体，四条腿，尾巴就会有一个区分，先来看一下身体的效果

5. 小仓鼠头部的制作形成 

头部又区分了头部区域整体，鼻子，眼睛，耳朵，而且想做的真实一些，眼睛可以时不时眨动一下，而眼睛眨动的过程就是，设定一个DIV元素，border-radius将其设置为圆形，而通过animation，将其不断缩放为0.然后再变回来，就形成了眨眼的动画

from, 90%, to { transform: scaleY(1); } 95% { transform: scaleY(0); }

6. 小仓鼠四肢的形成 

四肢除了布局层面，还要有个一直奔跑的动作，而且前2个腿和后2个腿，要有一个互动的过程，不能一起跑，几乎就是一前一后的过程，所以这个动画就涉及到rotate角度的变化，而且你想，一个DIV本身是一个带有width和height的元素，我们首先想到的是一个矩形，但小仓鼠的四肢很明显，是一个很特殊的形状，所以裁剪属性便派上了用场，类似于这样。

clip-path: polygon( 0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);

7. 完整源代码 

下面我把完整源代码放出来，需要的小伙伴可以直接复制粘贴到自己的文本里，进行查看。

8. 最后

到此这篇关于CSS3模拟小仓鼠一直奔跑的动画特效的文章就介绍到这了,更多相关css3小仓鼠奔跑动画内容请搜索0133技术站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持0133技术站！