纯CSS3实现的蜘蛛爬行动画

用CSS3 transform方法和DIV元素嵌套实现的一个蜘蛛爬行动画。

DOM文档元素结构如下：

<div class="container"><div class="left"><div class="uno"><div class="uno"><div class="uno"><div class="uno"></div></div></div></div><div class="dos"><div class="dos"><div class="dos"><div class="dos"></div></div></div></div><div class="tres"><div class="tres"><div class="tres"><div class="tres"></div></div></div></div><div class="cuatro"><div class="cuatro"><div class="cuatro"><div class="cuatro"></div></div></div></div></div><div class="right"><div class="uno"><div class="uno"><div class="uno"><div class="uno"></div></div></div></div><div class="dos"><div class="dos"><div class="dos"><div class="dos"></div></div></div></div><div class="tres"><div class="tres"><div class="tres"><div class="tres"></div></div></div></div><div class="cuatro"><div class="cuatro"><div class="cuatro"><div class="cuatro"></div></div></div></div></div>
</div>

CSS3代码如下：

html,
body {height: 100%;overflow: hidden;
}
.container {position: absolute;top: 0;left: 50%;margin-left: -20px;animation: inicio 5s ease-in-out forwards;
}
.container::after {background: rgba(0, 0, 0, 0.5);content: "";position: absolute;top: -1000px;left: 50%;margin-left: 9px;width: 1px;height: 1000px;
}
.container::before {background: #000;border-radius: 100%;color: #fff;font-size: 1.3em;content: "......";position: absolute;margin-top: -5px;margin-left: -2px;width: 25px;height: 25px;
}
.left {position: absolute;
}
.right {position: absolute;transform: rotateY(180deg);
}
.uno,
.dos,
.tres,
.cuatro {background: rgba(0, 0, 0, 0.5);position: relative;width: 20px;height: 3px;
}
.uno > .uno,
.dos > .dos,
.tres > .tres,
.cuatro > .cuatro {transform-origin: 20px top;transform: rotate(-80deg) translateX(20px);animation: seg 2.5s ease infinite;
}
.uno > .uno > .uno,
.dos > .dos > .dos,
.tres > .tres > .tres,
.cuatro > .cuatro > .cuatro {transform-origin: 20px top;transform: rotate(10deg) translateX(20px);animation: seg 1.5s ease infinite;
}
.right > .dos > .dos {animation-delay: 200ms;
}
.dos > .dos {animation-delay: 400ms;
}
.dos > .dos > .dos {animation-delay: 200ms;
}
.right > .tres > .tres {animation-delay: 400ms;
}
.tres > .tres {animation-delay: 600ms;
}
.tres > .tres > .tres {animation-delay: 300ms;
}
.right > .cuatro > .cuatro {animation-delay: 100ms;
}
.cuatro > .cuatro {animation-delay: 800ms;
}
.cuatro > .cuatro > .cuatro {animation-delay: 400ms;
}
@keyframes seg {50% {transform: rotate(55deg) translateX(20px);}
}
@keyframes inicio {100% {top: 50%;}
}

在线演示： http://wow.techbrood.com/fiddle/4350

纯CSS3实现的蜘蛛爬行动画相关推荐

css3蒙版运动,纯CSS3制作逼真的汽车运动动画
简要教程这是一款使用纯CSS3制作的逼真汽车运动动画特效.该特效中,所有元素都是通过CSS渲染得到的,没有使用任何图片.它通过公路斑马线的左右晃动来制作出汽车运动的视觉效果. 使用方法 HTML结构 ...
纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览源码下载实现的代码. html代码: < ...
一款纯css3实现的超炫动画背画特效
之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览 ...
html 鼠标图标做成动画效果,纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 实现的代码. html代码: 复制代码代码如下: css3代 ...
汉堡式折叠html,纯CSS3菜单汉堡包按钮变形动画特效
这是一款非常有趣的纯CSS3菜单汉堡包按钮变形动画特效.该特效共有9种不同的按钮变形动画效果,这些效果都是使用CSS3帧动画完成的,效果非常的酷. 制作方法 HTML结构该按钮变形动画使用嵌套的H ...
纯CSS3炫酷3D星空动画特效
效果: 源码: <!DOCTYPE html> <html lang="zh"> <head><meta charset="UT ...
纯CSS3海底泡泡多角鱼动画js特效
下载地址纯CSS3海底泡泡多角鱼动画特效是一款纯css3绘制卡通的海底水气泡和多角鱼群动画特效. dd:
纯CSS3 制作交通信号灯红绿灯动画效果
纯CSS3 制作交通信号灯红绿灯动画效果 HTML: <div class="light"><div class="red"></ ...
纯CSS3卡通模型飞机飞行动画
下载地址纯CSS3卡通模型飞机飞行动画是一款逼真的塞斯纳飞机天空飞行动画特效. dd:

纯CSS3实现的蜘蛛爬行动画

纯CSS3实现的蜘蛛爬行动画相关推荐

最新文章

热门文章