css实现毛毛虫爬行动作

本文给大家分享基于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实现毛毛虫爬行动作，希望对大家有所帮助。