CSS实现动画哈士奇

嘻嘻哈哈112
898 阅读4分钟

“我正在参加 码上掘金体验活动，详情：show出你的创意代码块”

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

前言

西伯利亚雪橇犬（俄语：Сибирский хаски，英语：Siberian Husky），常见别名哈士奇，昵称为二哈。

西伯利亚雪橇犬是原始的古老犬种，主要生活在西伯利亚东北部、格陵兰南部。哈士奇名字是源自其独特的嘶哑叫声 。哈士奇性格多变，有的极端胆小，也有的极端暴力，进入人类社会和家庭的哈士奇，都已经没有了这种极端的性格，比较温顺，是一种流行于全球的宠物犬。被世界各地人们广泛饲养，并在全球范围内有大量该犬种的赛事。

实现

布局

整体布局代码

<div class="husky">
	<!-- 整体 -->
  <div class="mane">
	  <!-- 丝巾 -->
    <div class="coat"></div>
  </div>
  <div class="body">
	  <!-- 身体 -->
    <div class="head">
		<!-- 头 -->
      <div class="ear"></div>
      <div class="ear"></div>
	  <!-- 耳朵 -->
      <div class="face">
		  <!-- 脸 -->
        <div class="eye"></div>
        <div class="eye"></div>
		<!-- 眼睛 -->
        <div class="nose"></div>
		<!-- 鼻子 -->
        <div class="mouth">
			<!-- 舌头 -->
          <div class="lips"></div>
          <div class="tongue"></div>
        </div>
      </div>
    </div>
    <div class="torso"></div>
	
  </div>
  <div class="legs">
	  <!-- 屁股 -->
    <div class="front-legs">
      <div class="leg"></div>
      <div class="leg"></div>
	  <!-- 前脚 -->
    </div>
    <div class="hind-leg">
		<!-- 后脚 -->
    </div>
  </div>
  <div class="tail">
	  <!-- 尾巴 -->
    <div class="tail">
      <div class="tail">
        <div class="tail">
          <div class="tail">
            <div class="tail">
              <div class="tail"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

样式

css部分我们来编写一下哈士奇的甩尾巴的一个动画，这里主要对哈士奇的尾巴使用了绝对定位，定位在哈士奇的屁股后面，然后使用了堆叠顺序，让尾巴位于屁股底下，接着我们来写哈士奇甩尾巴的动画，使用@keyframes、transform的属性，让尾巴随着时间的变化进行旋转，使人眼球看到一个甩尾巴的动画效果。设置了之后我们就多了甩尾巴的动作。看如下整体动画效果代码。

.tail {
  position: absolute;
  width: 15%;
  height: 6%;
  bottom: 0;
  right: 72%;
  background: #343C60;
  z-index: 0;
}
.tail > .tail {
  -webkit-animation: tail 12s none infinite;
          animation: tail 12s none infinite;
  height: 100%;
  width: 4vmin;
  right: 26%;
  -webkit-transform-origin: center right;
          transform-origin: center right;
  border-top-left-radius: 50% 50%;
  border-bottom-left-radius: 50% 50%;
  -webkit-transform: rotate(26deg);
          transform: rotate(26deg);
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.husky > .tail {
  border-top-left-radius: 10% 50%;
  border-bottom-left-radius: 10% 50%;
}
.husky > .tail > .tail {
  right: 88%;
}
@-webkit-keyframes tail {
  6.6666666667% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  10% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  13.3333333333% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  20% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  26.6666666667% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  46.6666666667% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  48.3333333333% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  50.8333333333% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  51.6666666667% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  52.5% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  53.3333333333% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  54.1666666667% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  55% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  55.8333333333% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  56.6666666667% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  57.5% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  58.3333333333% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  59.1666666667% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  60% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  60.8333333333% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  61.6666666667% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  62.5% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  63.3333333333% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  64.1666666667% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  65% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  65.8333333333% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  66.6666666667% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  67.5% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  68.3333333333% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  69.1666666667% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  70% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  70.8333333333% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  71.6666666667% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  72.5% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}
@keyframes tail {
  6.6666666667% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  10% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  13.3333333333% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  20% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  26.6666666667% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  46.6666666667% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  48.3333333333% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  50.8333333333% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  51.6666666667% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  52.5% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  53.3333333333% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  54.1666666667% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  55% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  55.8333333333% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  56.6666666667% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  57.5% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  58.3333333333% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  59.1666666667% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  60% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  60.8333333333% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  61.6666666667% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  62.5% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  63.3333333333% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  64.1666666667% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  65% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  65.8333333333% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  66.6666666667% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  67.5% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  68.3333333333% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  69.1666666667% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  70% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  70.8333333333% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  71.6666666667% {
    -webkit-transform: rotate(28deg);
            transform: rotate(28deg);
  }
  72.5% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}

总结

整篇主要用到的是css布局,背景，还有哈士奇甩尾巴、吐舌头、摇耳朵的一个动画用到了keyframes、transform的属性的平移旋转等css样式组合成的一个哈士奇的动画效果。

点个赞吧φ(>ω<*)

a1597ecaa1e0ec87eabdf2efbfd3111.jpg

avatar
文章
阅读
粉丝