原码笔记

原码笔记

css实现毛毛虫爬行动作

小诸哥 0

本文给大家分享基于css实现毛毛虫爬行动作，需要的朋友参考下吧

毛毛虫儿时大家都有见过，今天想起来写一个爬行的动作，具体代码如下所示：

html代码：

  1. <div class='container'>
  2.      <div class='hide left'></div>
  3.      &lt;div class='hide right'></div>
  4.      <div class='hide bottom'></div>
  5.      <div class='circle-container'>
  6.      <div class='circle'></div>
  7.      </div>
  8. </div>

css代码：

  1.      <style>
  2. body {
  3.      background-color: #1B6CB2;
  4.      margin: 0;
  5. }
  6. .container {
  7.      position: absolute;
  8.      width: 600px;
  9.      height: 400px;
  10.      overflow: hidden;
  11.      top: 50%;
  12.      left: 60%;
  13.      transform: translate(-50%, -50%);
  14. }
  15. .hide {
  16.      height: 100%;
  17.      width: 150px;
  18.      background: #1B6CB2;
  19.      position: absolute;
  20.      z-index: 2;
  21. }
  22. .hide.left {
  23.      left: 0;
  24. }
  25. .hide.right {
  26.      right: 0;
  27. }
  28. .hide.bottom {
  29.      bottom: 0;
  30.      width: 100%;
  31.      height: 50%;
  32. }
  33. .circle {
  34.      position: absolute;
  35.      height: 75px;
  36.      width: 150px;
  37.      border: 3px solid white;
  38.      border-radius: 50%/100% 100% 0 0;
  39.      border-bottom: none;
  40.      top: 40%;
  41.      left: 50%;
  42.      transform-origin: 0% 50%;
  43.      transform: translate(-50%, -50%);
  44.      animation: magic 1.8s ease infinite;
  45. }
  46. @keyframes magic {
  47.      0% {
  48.      transform: rotate(-170deg) translate(-50%, -50%);
  49.      }
  50.      50% {
  51.      transform: rotate(0deg) translate(-50%, -50%);
  52.      }
  53.      100% {
  54.      transform: rotate(180deg) translate(-50%, -50%);
  55.      }
  56. }
  57. .circle-container {
  58.      position: absolute;
  59.      height: 75px;
  60.      width: 150px;
  61.      top: 40%;
  62.      left: 50%;
  63.      transform-origin: 0% 50%;
  64.      transform: translate(-50%, -50%);
  65.      animation: power 1.8s ease-out infinite;
  66. }
  67. @keyframes power {
  68.      0% {
  69.      margin-left: 20px;
  70.      }
  71. 50% {
  72.      margin-left: -55px;
  73.      }
  74.      99.9% {
  75.      margin-left: -130px;
  76.      }
  77.      100% {
  78.      margin-left: 20px;
  79.      }
  80. }
  81.      </style>

总结

以上所述是小编给大家介绍的css实现毛毛虫爬行动作，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

标签： 毛毛虫

赏
版权声明：本站所有图片/内容除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！

上一篇使用css实现任意大小、任意方向和任意角度的箭头示例

下一篇纯 CSS 实现多行文字截断功能

相关文章