How to use pure CSS to achieve an overhead view of a football field (source code attached)-CSS Tutorial-php.cn

How to use pure CSS to achieve an overhead view of a football field (source code attached)

不言

Release： 2018-09-04 11:45:10

Original

3397 people have browsed it

The content of this article is about how to use pure CSS to realize an overhead view of a football field (source code attached). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. helped.

Effect preview

How to use pure CSS to achieve an overhead view of a football field (source code attached)

Source code download

https://github.com/comehope/front-end-daily-challenges

Code Interpretation

Define dom, the container contains the field, and the field contains elements such as the center line, midpoint, center circle, penalty area, penalty kick point, penalty kick arc, goal area, corner kick area, etc.:

<div>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

Copy after login

Centered display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(sandybrown, maroon);
}

Copy after login

Define container size:

.container {
    width: 120em;
    height: 80em;
    background-color: green;
    font-size: 5px;
}

.container span {
    display: block;
}

Copy after login

Define line type:

.container {
    --line: 0.3em solid white;
}

Copy after login

Draw the sideline of the field:

.container {
    padding: 5em;
}

.field {
    width: inherit;
    height: inherit;
    border: var(--line);
}

Copy after login

Draw the center line :

.halfway-line {
    width: calc(120em / 2);
    height: 80em;
    border-right: var(--line);
}

Copy after login

Draw the center circle:

.field {
    position: relative;
}

.centre-circle {
    width: 20em;
    height: 20em;
    border: var(--line);
    border-radius: 50%;
    position: absolute;
    top: calc((80em - 20em) / 2);
    left: calc((120em - 20em - 0.3em) / 2);
}

Copy after login

Draw the midpoint:

.centre-mark {
    width: 2em;
    height: 2em;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: calc(80em / 2 - 1em);
    left: calc(120em / 2 - 1em + 0.3em / 2);
}

Copy after login

Draw the penalty area:

.penalty-area {
    width: 18em;
    height: 44em;
    border: var(--line);
    position: absolute;
    top: calc((80em - 44em) / 2);
    left: -0.3em;
}

Copy after login

Draw the penalty spot:

.penalty-mark {
    width: 2em;
    height: 2em;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: calc(80em / 2 - 1em);
    left: calc(12em - 1em);
}

Copy after login

Draw the penalty arc:

.penalty-arc {
    width: 20em;
    height: 20em;
    border: var(--line);
    border-radius: 50%;
    position: absolute;
    top: calc((80em - 20em) / 2);
    left: calc(12em - 20em / 2);
}

Copy after login

Hide the left arc of the penalty arc, leaving only the right arc:

.field {
    z-index: 1;
}

.penalty-area {
    background-color: green;
}

.penalty-arc {
    z-index: -1;
}

Copy after login

Draw the goal area:

.goal-area {
    width: 6em;
    height: 20em;
    border: var(--line);
    position: absolute;
    top: calc((80em - 20em) / 2);
    left: -0.3em;
}

Copy after login

Draw the corner area:

.field {
    overflow: hidden;
}

.corner-arc::before,
.corner-arc::after {
    content: '';
    position: absolute;
    width: 5em;
    height: 5em;
    border: 0.3em solid white;
    border-radius: 50%;
    --offset: calc(-5em / 2 - 0.3em);
    left: var(--offset);
}

.corner-arc::before {
    top: var(--offset);
}

.corner-arc::after {
    bottom: var(--offset);
}

Copy after login

Copy the sub-elements in the dom, one copy on each side:

<div>
    <div>
        <div>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</div>

Copy after login

The style on the right side is the same as the left side, only horizontal Just flip it over:

.right {
    position: absolute;
    top: 0;
    left: 50%;
    transform: rotateY(180deg);
}

Copy after login

You're done!

Related recommendations:

How to use pure CSS to realize the display box effect of butterfly specimens

How to use pure CSS to realize the animation effect of Windows startup interface

The above is the detailed content of How to use pure CSS to achieve an overhead view of a football field (source code attached). For more information, please follow other related articles on the PHP Chinese website!