css3 图钉,CSS3 墙壁上的图钉

CSS

语言：

CSSSCSS

确定

.first-face {

display: flex;

justify-content: center;

align-items: center;

}

.second-face {

display: flex;

justify-content: space-between;

}

.second-face .pip:nth-of-type(2) {

align-self: flex-end;

}

.third-face {

display: flex;

justify-content: space-between;

}

.third-face .pip:nth-of-type(2) {

align-self: center;

}

.third-face .pip:nth-of-type(3) {

align-self: flex-end;

}

.fourth-face,

.sixth-face {

display: flex;

justify-content: space-between;

}

.fourth-face .column,

.sixth-face .column {

display: flex;

flex-direction: column;

justify-content: space-between;

}

.fifth-face {

display: flex;

justify-content: space-between;

}

.fifth-face .column {

display: flex;

flex-direction: column;

justify-content: space-between;

}

.fifth-face .column:nth-of-type(2) {

justify-content: center;

}

* {

box-sizing: border-box;

}

html,

body {

height: 100%;

}

body {

display: flex;

align-items: center;

justify-content: center;

vertical-align: center;

flex-wrap: wrap;

background: url('/assets/landing.jpg')no-repeat;

background-size: cover;

}

[class$='face'] {

margin: 16px;

padding: 4px;

background-color: ;

width: 104px;

height: 104px;

box-shadow: inset 0 5px, inset 0 -5px #, inset 5px 0, inset -5px 0;

border-radius: 10px;

}

.pip {

display: block;

width: 24px;

height: 24px;

border-radius: 50%;

margin: 4px;

background-color: #00FF7F;

box-shadow: inset 0 2px #555, inset 0 2px #555;

}