单标签CSS实现自嗨兔（简陋版）

dengdd酱
327 阅读3分钟

我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛

以前一直没有在意单标签实现一些动画的原理，这次刚好蹭活动，同时补习一下。

做出来的自嗨兔效果：

1.gif

附上源码库：gitee.com/larntin/htm…

使用到的知识点

  1. transform transiton
  2. animation @keyframes
  3. box-shadow

Transform transiton

Transform 属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

主流浏览器对2D、3D属性的支持：

TransformChromeIEFireFox
2D36.0 4.0-webkit10.0 9.0-ms-16.0 3.5-moz-
3D36.0 12.0-webkit1210

就不贴具参数的具体意义了，文档地址如下，需要的时候去看看即可：

使用效果就是 Transform 配合 transiton(transition-property) 检查那个动画属性变量去触发动画，通过 transiton的其他相对应的属性时间(transition-duration)，延迟(transition-delay)，和执行效果( transition-timing-function线性的，easy-in，easy-out)来控制动画的效果。

box-shadow

box-shadow 属性可以设置一个或多个下拉阴影的框。

文档地址：box-shadow

属性值说明
h-shadow必需的。水平阴影的位置。允许负值
v-shadow必需的。垂直阴影的位置。允许负值
blur可选。模糊距离
spread可选。阴影的大小
color可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset可选。从外层的阴影（开始时）改变阴影内侧阴影

当我们把 blur 的值设为 0，同时设置做个值，每一个值不同的，这样就可以把同一个对象在不同的屏幕区域复制多份。

#app::before {
  content: "";
  position: absolute;
  top: 34%;
  left: 42%;  
  width: 10px;    /* 这四个属性绘制一个耳朵 */
  height: 16px;  /* 这四个属性绘制一个耳朵 */
  transform: translate(-5px, -8px);
  background-color: #fff;  /* 这四个属性绘制一个耳朵 */
  border-radius: 5px;  /* 这四个属性绘制一个耳朵 */
  box-shadow: 18px 0 0 #fff;  /* 便宜18px，不模糊，复制另一个耳朵 */
  animation: dancingEar 1s linear infinite;
}

#app::after {
  content: "";
  position: absolute;
  top: 51%;
  left: 45%;
  width: 13px;  /* 同理，绘制一个眼 */
  height: 4px;
  transform: translate(-7px, -2px);
  background-color: #7d9fdc;
  border-radius: 9px;
  box-shadow: 17px 0px 0 #7d9fdc, 6px 1px 0 15px #fff; /* 第一个参数复制一个眼睛，第二个参数放大15倍作为脸，改成白色*/
  animation: dancingFace 1s linear infinite;
}
  • 两个耳朵：在::before中，画一个圆角矩形，然后加上横向偏移复制一个
  • 眼睛，脸：在::after中，绘制一个眼睛（淡蓝），然后 box-shodow 加上横向便宜复制一个，然后再复制一个脸但是需要放大改变颜色（变成白色），这里发现将原来的眼睛放大之后，纵向的比例失真了，不在是扁长的眼睛，变成现在有点园的脸了

animation

然后就是我们的动画了，让他左右摇摆。

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

文档地址：

@keyframes dancingFace {
  0% {
    transform: translate(-7px, -2px);
  }

  20% {
    transform: translate(-10px, 2px);
  }


  40% {
    transform: translate(-7px, -2px);
  }


  60% {
    transform: translate(-4px, 2px);
  }


  100% {
    transform: translate(-7px, -2px);
  }
}

通过对于耳朵和脸的动画的精确控制，达到统一运动的，按照“人”字形摇摆。

Hey! we go! 嗨起来。

avatar
文章
阅读
粉丝