Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
16
Help us understand the problem. What is going on with this article?
@junya

CSSで戦車を作ってみた。

More than 5 years have passed since last update.

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: 水平方向の径 / 垂直方向の径;
/で区切ることで個別に指定できる

16
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
junya

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
16
Help us understand the problem. What is going on with this article?