CSS

语言：

CSSSCSS

确定

.foo {

width: 1.61803;

}

body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

width: 100vw;

height: 100vh;

background-color: #101010;

}

.Instagram {

position: relative;

display: block;

overflow: hidden;

width: 1em;

height: 1em;

font-size: 50vmin;

background-color: #ded1c1;

border-radius: 22.3%;

}

.Instagram-strip {

position: absolute;

top: 0;

left: 0;

z-index: 1;

display: block;

width: 100%;

height: 0.33333em;

background: -webkit-linear-gradient(0deg, #9b6954 0em, #9b6954 0.05em, #fb3958 0.05em, #fb3958 0.1em, #ffc838 0.1em, #ffc838 0.15em, #6dc993 0.15em, #6dc993 0.2em, #458eff 0.2em, #458eff 0.25em, #9b6954 0.25em, #9b6954 0.3em);

background: linear-gradient(90deg, #9b6954 0em, #9b6954 0.05em, #fb3958 0.05em, #fb3958 0.1em, #ffc838 0.1em, #ffc838 0.15em, #6dc993 0.15em, #6dc993 0.2em, #458eff 0.2em, #458eff 0.25em, #9b6954 0.25em, #9b6954 0.3em);

}

.Instagram-viewfinder {

position: absolute;

top: 0.06667em;

right: 0.06667em;

z-index: 2;

display: block;

width: 0.2em;

height: 0.2em;

background-color: #061d2e;

border-radius: 22.3%;

}

.Instagram-viewfinder::before,

.Instagram-viewfinder::after {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

display: block;

border-radius: 50%;

content: "";

}

.Instagram-viewfinder::before {

width: 50%;

height: 50%;

background-color: #0c3a5b;

}

.Instagram-viewfinder::after {

width: 10%;

height: 10%;

background-color: #125688;

}

.Instagram-shadow {

position: absolute;

top: 50%;

left: 0;

right: 0;

z-index: 3;

display: block;

margin: 0 auto;

width: 0.5em;

height: 0.70711em;

background: -webkit-linear-gradient(top, #bba07e, #ded1c1);

background: linear-gradient(to bottom, #bba07e, #ded1c1);

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-transform-origin: top center;

transform-origin: top center;

}

.Instagram-lens {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

z-index: 4;

display: block;

width: 0.5em;

height: 0.5em;

background-color: #ded1c1;

border-radius: 50%;

}

.Instagram-lens::before,

.Instagram-lens::after {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

display: block;

border-radius: 50%;

content: "";

}

.Instagram-lens::before {

width: 0.33333em;

height: 0.33333em;

background-color: #0c3a5b;

box-shadow: inset 0 0 0 0.08333em #061d2e;

}

.Instagram-lens::after {

width: 0.0625em;

height: 0.0625em;

background-color: #061d2e;

}

.Plug {

position: absolute;

right: 1rem;

bottom: 1rem;

display: inline-block;

color: #458eff;

font-weight: 300;

line-height: 1;

text-decoration: none;

}

.Plug:hover {

color: #6dc993;

}