Help us understand the problem. What is going on with this article?

CSSで戦車を作ってみた2

More than 3 years have passed since last update.

sample.png

実際の動作確認はこちら
https://jsfiddle.net/junya_5102/4dz6ys9b/2/

html

<div class="tank"></div>

CSS

.tank{
  position: relative;

  /* size */
  font-size: 3em;

  width: 1em;
  height: 1em;
  margin-left: .25em;
  border-radius: 0 25% 15% 0;
  background-color: #646249;
}

.tank:before{
  content: '■';
  position: absolute;
  top: 50%; left: 100%;

  width: .6em;
  height: .40em;

  color: #646249;

  text-indent: -.75em;
  line-height: .4;
  background-color: currentColor;

  transform: translateY(-50%);
}

.tank:after{
  content: 'i';
  position: absolute;
  top: 100%; left: 50%;

  width: 1.6em;
  height: .6em;
  border: .0825em solid #222222;
  border-radius: 20% 20% 15% 20%;

  color: transparent;
  line-height: 0;
  text-align: center;
  text-shadow: .25em -.75em 0 #646249;

  box-shadow: 0 -.15em 0 0 #646249;

  /* image repeat position / size */
  background:
    radial-gradient(circle at 50% 60%,#646249 .18em,transparent 0em)
    repeat-x 50% 50% / .45em 100% border-box,

    radial-gradient(circle at 50% 00%,gray .14em,#222222 0em) 
    50% 00% / .35em 100%  border-box;

  transform: translateX(-50%);
  box-sizing: border-box;
}

/* animations */
.tank:hover:before{
  content: '■o';
  white-space: nowrap;
  animation: shot_anim 3s linear infinite;
}

.tank:hover:after{
  animation: crawler_anim 3s linear infinite;
}

@keyframes shot_anim{
  0%{
    letter-spacing: 0;
  }

  5%,50%{
    left: 96.5%;
  }

  60%,95%{
    left: 100%;
  }

  100%{
    letter-spacing: 20em;
  }
}

@keyframes crawler_anim{ 
  from{
    background-position: 50% 50%, 50% 00%;
  }
  to{
    background-position: 50% 50%, 3.5em 00%;
  }
}

解説

胴体

sample0.png

div要素で作っています。
border-radiusで右上と右下を丸める

sample1.png

:beforeで作っています。

赤い部分は テキストの(しかく)で 青い部分は width > heightの 矩形
テキストは text-indent と line-heightを使って配置

履帯

sample2.png

:afterで作っています。
赤い部分 と 青い部分は radial-gradientを使って作る。

.tank:after{
  background:
    radial-gradient(circle at 50% 60%,blue .18em,transparent 0em)
    repeat-x 50% 50% / .45em 100% border-box,

    radial-gradient(circle at 50% 00%,red .14em,#222222 0em) 
    50% 00% / .35em 100%  border-box;
}

  • radial-gradient(形状 at 位置,色1,色2)

  • background(ショートハンド)で まとめ書く

    • 左から順に background-image, background-repeat, background-position, background-size, background-origin となります
    • sizeを指定する場合は positionのあとに /で区切って指定する
  • background-origin

    • image(gradient)の配置領域を指定するプロパティ
    • border-box で ボーダー領域を含める

頭の出っ張り

sample4.png

:afterの テキストのiです。
line-heightを使った配置には限界があります、そこでtext-shadowを使います。

.tank:after{
  content: 'i';

  /* 'i'の影をつかうので'i'は透明にしておく */
  color: transparent;
  line-height: 0;
  text-align: center;
  text-shadow: .25em -.75em 0 red;
}

過去の投稿

http://qiita.com/junya/items/d36d9d90435d132edecf

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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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