css实现毛毛虫爬行动作

互联网   发布时间:2018-03-07 14:31:27   作者:佚名   我要评论

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

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

html代码:

<div class='container'>
  <div class='hide left'></div>
  <div class='hide right'></div>
  <div class='hide bottom'></div>
  <div class='circle-container'>
    <div class='circle'></div>
  </div>
</div>

css代码:

 <style>
body {
  background-color: #1B6CB2;
  margin: 0;
}
.container {
  position: absolute;
  width: 600px;
  height: 400px;
  overflow: hidden;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
}
.hide {
  height: 100%;
  width: 150px;
  background: #1B6CB2;
  position: absolute;
  z-index: 2;
}
.hide.left {
  left: 0;
}
.hide.right {
  right: 0;
}
.hide.bottom {
  bottom: 0;
  width: 100%;
  height: 50%;
}
.circle {
  position: absolute;
  height: 75px;
  width: 150px;
  border: 3px solid white;
  border-radius: 50%/100% 100% 0 0;
  border-bottom: none;
  top: 40%;
  left: 50%;
  transform-origin: 0% 50%;
  transform: translate(-50%, -50%);
  animation: magic 1.8s ease infinite;
}
@keyframes magic {
  0% {
    transform: rotate(-170deg) translate(-50%, -50%);
  }
  50% {
    transform: rotate(0deg) translate(-50%, -50%);
  }
  100% {
    transform: rotate(180deg) translate(-50%, -50%);
  }
}
.circle-container {
  position: absolute;
  height: 75px;
  width: 150px;
  top: 40%;
  left: 50%;
  transform-origin: 0% 50%;
  transform: translate(-50%, -50%);
  animation: power 1.8s ease-out infinite;
}
@keyframes power {
  0% {
    margin-left: 20px;
  }
  50% {
    margin-left: -55px;
  }
  99.9% {
    margin-left: -130px;
  }
  100% {
    margin-left: 20px;
  }
}
  </style>

总结

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

相关文章

  • css多行文本溢出时出现省略号的示例

    这篇文章主要介绍了css多行文本溢出时出现省略号的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-13
  • 使用css transition属性实现一个带动画显隐的微信小程序部件

    这篇文章主要介绍了使用css transition属性实现一个带动画显隐的微信小程序部件的相关资料,需要的朋友可以参考下
    2018-06-13
  • 分享20条编写 CSS 代码的建议

    本文是脚本之家小编给大家分享的20条书写CSS代码的建议,感兴趣的朋友一起看看吧
    2018-06-08
  • 分享CSS书写规范、顺序【推荐大家使用】

    本文是脚本之家小编收藏整理推荐给大家使用的css书写规范和顺序,感兴趣的朋友一起看看吧
    2018-06-07
  • 浅谈CSS中的百分比

    这篇文章主要介绍了浅谈CSS中的百分比,在定义CSS样式的时候经常会用的 “%”这个长度单位,但是这个百分比到底是相对于谁的百分比呢
    2018-06-07
  • 浅谈CSS层叠机制

    这篇文章主要介绍了浅谈CSS层叠机制的相关资料,层叠机制可以解决作者(写代码的人),用户(浏览页面的人)和用户代理(一般指浏览器)的样式冲突,小编觉得挺不错的,现在
    2018-06-07
  • 详解css display:box 新属性

    这篇文章主要介绍了css display:box 新属性的相关资料,需要的朋友可以参考下
    2018-06-05
  • 浅谈CSS浮动的特性

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。这篇文章主要介绍了浅谈CSS浮动的特性,小编觉得挺不错的,现在分享给大家,也给大家做
    2018-06-05
  • 前端应该掌握的CSS实现多列等高布局技巧

    我们在写页面的时候,有的时候会遇到多栏布局,这篇文章主要介绍了前端应该掌握的CSS实现多列等高布局技巧,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟
    2018-06-05
  • 使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果

    有时侯页面很长,需要指示箭头告诉用户下面还有东西。下面脚本之家小编给大家带来了使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果,感兴趣的朋友一起看看吧
    2018-06-04

最新评论