“我正在参加 码上掘金体验活动，详情：show出你的创意代码块”

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11天，点击查看活动详情。

前言

漩涡鸣人，日本漫画《火影忍者》及其衍生作品中的男主角。 介绍一下CSS实现的像素漩涡鸣人,下面将给大家详细介绍一下整个代码的流程.

实现

漩涡鸣人

布局

        <div id="naruto">
            <section class="head"></section>
            //头
            <section class="torso"></section>
            //躯干
            <section class="legs"></section>
            //脚
            <section class="shadow"></section>
            //站立阴影
        </div>

头部样式

.head {
  -webkit-animation: head 1s infinite;
  -webkit-animation-timing-function: linear;
  animation: head 1s infinite;
  animation-timing-function: linear;
  background: #fff;
  height: 10px;
  left: 50%;
  position: absolute;
  top: 0px;
  width: 10px;
  z-index: 50;
  box-shadow: 此处省略一万字;
}

躯干样式

.torso {
  -webkit-animation: torso 1s infinite;
  -webkit-animation-timing-function: linear;
  animation: torso 1s infinite;
  animation-timing-function: linear;
  background: transparent;
  height: 10px;
  left: 50%;
  position: absolute;
  top: 180px;
  width: 10px;
  z-index: 40;
  box-shadow: -70px 0 black, 60px 0 black, 70px 0 black, 80px 0 black, -80px 10px black, -70px 10px black, -60px 10px #5f5f5f, 50px 10px #5f5f5f, 60px 10px black, 70px 10px black, 80px 10px #f89631, 90px 10px black, -90px 20px black, -80px 20px #01009c, -70px 20px black, -60px 20px #5f5f5f, -50px 20px #999999, 40px 20px #5f5f5f, 50px 20px #5f5f5f, 60px 20px black, 70px 20px #fe6400, 80px 20px #f89631, 90px 20px black, -100px 30px black, -90px 30px #01009c, -80px 30px #01009c, -70px 30px black, -60px 30px #5f5f5f, -50px 30px #999999, -40px 30px #999999, 30px 30px #5f5f5f, 40px 30px #999999, 50px 30px #5f5f5f, 60px 30px black, 70px 30px #fe6400, 80px 30px #fe6400, 90px 30px #f89631, 100px 30px black, -110px 40px black, -100px 40px #01009c, -90px 40px #01009c, -80px 40px #332dff, -70px 40px #01009c, -60px 40px black, -50px 40px #999999, -40px 40px #cecece, -30px 40px #cecece, -20px 40px #fe6400, -10px 40px #f89631, 0 40px #f89631, 10px 40px #f89631, 20px 40px #999999, 30px 40px #999999, 40px 40px #999999, 50px 40px black, 60px 40px #01009c, 70px 40px black, 80px 40px #fe6400, 90px 40px #f89631, 100px 40px black, -120px 50px black, -110px 50px black, -100px 50px black, -90px 50px #332dff, -80px 50px #332dff, -70px 50px #332dff, -60px 50px #01009c, -50px 50px black, -40px 50px #999999, -30px 50px #cecece, -20px 50px #fe6400, -10px 50px #ffcd31, 0 50px #ffcd31, 10px 50px #f89631, 20px 50px #fe6400, 30px 50px #999999, 40px 50px black, 50px 50px #01009c, 60px 50px #01009c, 70px 50px black, 80px 50px #fe6400, 90px 50px black, 100px 50px #d10000, 110px 50px black, -120px 60px black, -110px 60px #f89631, -100px 60px #01009c, -90px 60px #01009c, -80px 60px #332dff, -70px 60px #332dff, -60px 60px #332dff, -50px 60px #01009c, -40px 60px black, -30px 60px black, -20px 60px black, -10px 60px #f89631, 0 60px #f89631, 10px 60px #fe6400, 20px 60px black, 30px 60px black, 40px 60px #01009c, 50px 60px #01009c, 60px 60px #01009c, 70px 60px #01009c, 80px 60px black, 90px 60px black, 100px 60px #d10000, 110px 60px black, -130px 70px black, -120px 70px #f89631, -110px 70px #f89631, -100px 70px #fe6400, -90px 70px black, -80px 70px #01009c, -70px 70px #332dff, -60px 70px #01009c, -50px 70px #01009c, -40px 70px #01009c, -30px 70px #01009c, -20px 70px black, -10px 70px #fe6400, 0 70px #fe6400, 10px 70px black, 20px 70px black, 30px 70px #01009c, 40px 70px #01009c, 50px 70px #01009c, 60px 70px #01009c, 70px 70px black, 80px 70px #fe6400, 90px 70px black, 100px 70px #d10000, 110px 70px black, -130px 80px black, -120px 80px #ffcd31, -110px 80px #f89631, -100px 80px #f89631, -90px 80px #fe6400, -80px 80px black, -70px 80px black, -60px 80px #01009c, -50px 80px #01009c, -40px 80px #01009c, -30px 80px #01009c, -20px 80px black, -10px 80px #fe6400, 0 80px #f89631, 10px 80px #fe6400, 20px 80px black, 30px 80px #01009c, 40px 80px #01009c, 50px 80px #01009c, 60px 80px black, 70px 80px black, 80px 80px #fe6400, 90px 80px #fe6400, 100px 80px black, -140px 90px black, -130px 90px #ffcd31, -120px 90px #ffcd31, -110px 90px #ffcd31, -100px 90px #f89631, -90px 90px #fe6400, -80px 90px #fe6400, -70px 90px black, -60px 90px black, -50px 90px black, -40px 90px black, -30px 90px #01009c, -20px 90px black, -10px 90px #fe6400, 0 90px #f89631, 10px 90px #fe6400, 20px 90px black, 30px 90px black, 40px 90px black, 50px 90px black, 60px 90px black, 70px 90px #fe6400, 80px 90px #fe6400, 90px 90px #fe6400, 100px 90px black, 110px 90px black, -150px 100px black, -140px 100px black, -130px 100px #ffcd31, -120px 100px #ffcd31, -110px 100px #ffcd31, -100px 100px #f89631, -90px 100px #fe6400, -80px 100px black, -70px 100px black, -60px 100px #fe6400, -50px 100px #fe6400, -40px 100px #fe6400, -30px 100px black, -20px 100px black, -10px 100px #fe6400, 0 100px #f89631, 10px 100px #fe6400, 20px 100px black, 30px 100px #fe6400, 40px 100px #fe6400, 50px 100px black, 60px 100px black, 70px 100px #fe6400, 80px 100px #fe6400, 90px 100px black, 100px 100px #fe6400, 110px 100px black, -150px 110px black, -140px 110px #fe6400, -130px 110px #f89631, -120px 110px #ffcd31, -110px 110px #fe6400, -100px 110px #fe6400, -90px 110px black, -80px 110px black, -70px 110px black, -60px 110px #fe6400, -50px 110px #fe6400, -40px 110px #f89631, -30px 110px #ffcd31, -20px 110px #fe6400, -10px 110px #fe6400, 0 110px #f89631, 10px 110px #f89631, 20px 110px #fe6400, 30px 110px #f89631, 40px 110px #fe6400, 50px 110px #fe6400, 60px 110px black, 70px 110px black, 80px 110px black, 90px 110px #fe6400, 100px 110px #f89631, 110px 110px #fe6400, 120px 110px black, -150px 120px black, -140px 120px #fe6400, -130px 120px #ffcd31, -120px 120px #ffcd31, -110px 120px #ffcd31, -100px 120px #f89631, -90px 120px #fe6400, -80px 120px black, -70px 120px black, -60px 120px black, -50px 120px #f89631, -40px 120px #f89631, -30px 120px #ffcd31, -20px 120px #fe6400, -10px 120px #fe6400, 0 120px #f89631, 10px 120px #f89631, 20px 120px black, 30px 120px #f89631, 40px 120px #fe6400, 50px 120px black, 60px 120px black, 70px 120px #fe6400, 80px 120px #fe6400, 90px 120px #f89631, 100px 120px #fe6400, 110px 120px black, 120px 120px black, -140px 130px black, -130px 130px #f89631, -120px 130px #f89631, -110px 130px #f89631, -100px 130px #fe6400, -90px 130px black, -80px 130px black, -70px 130px black, -60px 130px black, -50px 130px black, -40px 130px #fe6400, -30px 130px #fe6400, -20px 130px #fe6400, -10px 130px #fe6400, 0 130px #fe6400, 10px 130px black, 20px 130px #fe6400, 30px 130px black, 40px 130px black, 50px 130px black, 60px 130px black, 70px 130px black, 80px 130px black, 90px 130px black, 100px 130px black, 110px 130px #ff9864, 120px 130px black, -150px 140px black, -140px 140px #ff9864, -130px 140px black, -120px 140px black, -110px 140px black, -100px 140px black, -90px 140px black, -80px 140px black, -50px 140px black, -40px 140px black, -30px 140px black, -20px 140px black, -10px 140px black, 0 140px black, 10px 140px black, 20px 140px black, 30px 140px black, 40px 140px black, 60px 140px black, 70px 140px black, 80px 140px #ff9864, 90px 140px #ff9864, 100px 140px #fdc999, 110px 140px #ff9864, 120px 140px black, -150px 150px black, -140px 150px #ffcf6a, -130px 150px #fdc999, -120px 150px #f6f1ba, -110px 150px #fdc999, -100px 150px #ffcf6a, -90px 150px black, -40px 150px black, -30px 150px black, -20px 150px black, -10px 150px black, 0 150px black, 10px 150px black, 20px 150px black, 70px 150px black, 80px 150px black, 90px 150px #ff9864, 100px 150px #fdc999, 110px 150px black, 120px 150px black, -150px 160px black, -140px 160px #ffcf6a, -130px 160px #fdc999, -120px 160px #f6f1ba, -110px 160px #ff9864, -100px 160px black, 80px 160px black, 90px 160px black, 100px 160px black, 110px 160px black, -140px 170px black, -130px 170px #ffcf6a, -120px 170px #fdc999, -110px 170px black, -130px 180px black, -120px 180px black;
}

总结

整篇主要用到的是css的 animation动画属性,@keyframes动画,相对定位，堆叠顺序,阴影,以上这些内容组合成的像素漩涡鸣人,谢谢观看!

点个赞吧 球球了φ(>ω<*)