• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

The popular science

The size and format of the national flag

size

The general standard of national flag is as follows five kinds, all circles choose at their discretion: national flag size is different, flagpole height is different.

The model of the national flag is 1#, the size of which is 288cm×192cm, and the reference height of the flag pole is more than 15 meters.

The flag model is 2#, the size is 240cm×160cm, and the reference height of the flag pole is more than 12 meters.

The flag model is 3#, the size of 192cm×128cm, the reference height of the flag pole is more than 9 meters.

The flag model is 4#, the size is 144cm×96cm, and the reference height of the flag pole is more than 6 meters.

The flag model is 5#, the size is 96cm×64cm, and the reference height of the flag pole is more than 3 meters.

standard

Flag is red, rectangular, its length and height of three and two ratio.

The top left of the flag is decorated with five yellow five-pointed stars.

One star is larger, and its outer circle diameter is three-tenths of the flag height, on the left.

The four stars are smaller, the diameter of the outer circle is one tenth of the flag height, and the ring arch is on the right of the big star.

Duration of flag-raising

It takes two minutes and seven seconds for the flag to be raised from the ground to the top of the pole in Tian ‘anmen Square.

implementation

The main structure

<div class="national-flag"></div>
<div class="flagpole"></div>
<div class="base"></div>
Copy the code

The pole

.flagpole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: -webkit-linear-gradient(
      0deg.#cbcbcb 0%.#ebebeb 30%.#ebebeb 70%.#cbcbcb 100%
    );
    height: 800px;
    width: 10px;
    border: 10px;
  }
Copy the code

The base

.base {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  border-top: 50px solid transparent;
  border-bottom: 50px solid #5b5b5b;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
Copy the code

The red flag

.national-flag {
  position: absolute;
  top: 95%;
  left: 50%;
  transform: translate(5%, -80%);
  position: absolute;
  background-color: red;
  width: 192px;
  height: 128px;
  animation: moveflag 20s;
}
Copy the code

animation

 @keyframes moveflag {
  from {
    top: 95%;
  }
  to {
    top: 128px; }}Copy the code

The effect