LoginSignup
16

More than 5 years have passed since last update.

CSSで戦車を作ってみた。

Last updated at Posted at 2015-12-27

sample002.png

実際の動きはこちらで確認できます
https://jsfiddle.net/junya_5102/th133o9g/7/

html


<div class="tank-wrap medium green">
  <div class="tank">
    <div class="turret">
      <div class="gun"></div>
      <div class="sub-gun"></div>
      <div class="antenna"></div>
    </div>
    <div class="body"></div>
    <div class="crawler">
      <div class="roller"></div>
      <div class="roller"></div>
      <div class="roller"></div>
      <div class="roller"></div>
      <div class="roller"></div>
      <div class="roller"></div>
      <div class="roller"></div>
    </div>
  </div>
</div>

CSS


.tank-wrap{
  position: relative;
  width: 300px;
  height: 120px;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 100px;
}

.tank{
  position: relative;
  -webkit-perspective: 500px;
}

/* 砲塔 */
.tank .turret{
  position: relative;
  top: 15px;
  left: 60px;
  width: 180px;
  height: 40px;
  border-radius: 60% 0 0 80% / 100% 0 0 100%; 
  background: currentColor;
  box-shadow: 10px 5px 0 0 currentColor;
}

.tank .turret:before{
  position: absolute;
  top: 10px;
  right: -30px;
  content: "";
  width: 50px;
  height: 50%;
  background: currentColor;
  box-shadow: -5px 0 0 0 currentColor;
}

/* 砲 */
.tank .turret .gun{
  position: absolute;
  top: 15px;
  left: -50px;
  width: 90px;
  height: 10px;
  border-radius: 40% 0 0 40%;
  background: currentColor;
}

.tank .turret .gun:before{
  position: absolute;
  top: 1px;
  left: -80px;
  content: "";
  display: inline-block;
  width: 90px;
  height: 8px;
  border-radius: 40% 0 0 40%;
  background: inherit;
}

/* 機銃 */
.tank .turret .sub-gun{
  position: absolute;
  top: -10px;
  left: 50px;
  width: 25px;
  height: 8px;
  border-radius: 50% 80% 0 50% / 100% 100% 0 100%;
  background: currentColor;
}

.tank .turret .sub-gun:before,
.tank .turret .sub-gun:after{
  position: absolute;
  content: "";
  display: inline-block;
  background: inherit;
}

.tank .turret .sub-gun:before{
  top: 3px;
  left:  -30px;
  width: 40px;
  height: 3px;
  border-radius: 50% 0 0 50% / 100% 0 0 100%;
}

.tank .turret .sub-gun:after{
  left: 10px;
  width: 8px;
  height: 30px;
}

/* アンテナ */
.tank .turret .antenna{
  position: absolute;
  right: -20px;
  width: 50px;
  height: 1px;
  background: #000;
  transform: rotate(120deg);
}

/* 車体 */
.tank .body{
  position: relative;
  top: 10px;
  width: 300px;
  height: 40px;
  border-radius: 40% 0 0 0 ;
  background: currentColor;
  z-index: 2;
}

/* 履帯全体 */
.tank .crawler{
  position: relative;
  left: 0;
  width: 290px;
  height: 35px;
  border-right: 5px dotted #4F3E37;
  border-left: 5px dotted #4F3E37;
  border-radius: 0 0 30% 30% / 0 0 100% 100%;
  background: #052224;
  z-index: 1;
  overflow: hidden;
  box-sizing: border-box;
}

/* 履帯 */
.tank .crawler:before{
  position: absolute;
  bottom: 1px;
  left: -100%;
  content: "";
  width: 300%;
  height:100px;
  border-bottom: 5px dotted #4F3E37;
  background: #052224;
}

/* 転輪 */
.tank .crawler .roller{
  position: absolute;
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 2px dotted white;
  border-radius: 100%;
  background: #264345;
  box-sizing: border-box;
}

.tank .crawler .roller:nth-child(1){
  top: -15px;
  left: 0px;
}

.tank .crawler .roller:nth-child(2){
  top: -2px;
  left: 30px;
}

.tank .crawler .roller:nth-child(3){
  left: 80px;
}

.tank .crawler .roller:nth-child(4){
  left: 130px;
}

.tank .crawler .roller:nth-child(5){
  left: 180px;
}

.tank .crawler .roller:nth-child(6){
  top: -3px;
  left: 220px;
}

.tank .crawler .roller:nth-child(7){
  top: -15px;
  left: 250px;
}

/* 色 */
.green{
  color: #264345;
}

/* 大きさ */
.medium{
  transform: scale(1);
}

.small{
  transform: scale(.5);
}

/* アニメーション */
.tank{
  animation: tank_anim 1s ease-in-out infinite;
}

.tank .turret{
  animation: turret_anim 5s ease-in-out infinite alternate;
}

.tank .crawler:before{
  animation: crawler_anim 5s linear infinite;
}

.tank .crawler .roller{
  animation: roller_anim 3s linear infinite;
}

/* 戦車の揺れ */
@keyframes tank_anim{
  0%{
    transform-origin: center center;
  }
  25%{
    transform-origin: left center;
    transform: rotate(.12deg);
  }

  75%{
    transform-origin: right center;
    transform: rotate(.12deg);
  }
}

/* 砲塔回転 */
@keyframes turret_anim{
  100%{
    transform: rotateY(25deg);
  }
}

/* 転輪回転 */
@keyframes roller_anim{
  100%{
    transform: rotate(-360deg);
  }
}

/* 履帯(キャタピラ)回転 */
@keyframes crawler_anim{
  100%{
    transform: translateX(100px);
  }
}

border-radius: 水平方向の径 / 垂直方向の径;
/で区切ることで個別に指定できる

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16