HTML动画实现唱片封面,HTML5专辑封面创意设计

CSS

语言：

CSSSCSS

确定

body {

text-align: center;

}

section {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

height: 100vh;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

padding: 1em;

}

p {

-webkit-box-flex: 1;

-webkit-flex: 1 0 100%;

-ms-flex: 1 0 100%;

flex: 1 0 100%;

}

.o-album {

width: 90vmin;

height: 90vmin;

position: relative;

}

.o-logo {

border-radius: 50%;

height: 1px;

width: 1px;

position: absolute;

}

.o-logo-basic {

bottom: 10%;

left: 50%;

box-shadow: -6vmin 0 0 0.5vmin #47473f, -4vmin 0 0 0.5vmin #47473f, -2vmin 0 0 0.5vmin #47473f, 0 0 0 0.5vmin #47473f, 4vmin 0 0 0.5vmin #47473f, -6vmin 2vmin 0 0.5vmin #47473f, -4vmin 2vmin 0 0.5vmin #47473f, 0 2vmin 0 0.5vmin #47473f, 2vmin 2vmin 0 0.5vmin #47473f, 4vmin 2vmin 0 0.5vmin #47473f, 6vmin 2vmin 0 0.5vmin #47473f;

}

.o-logo-alt {

right: 12.5%;

bottom: 30%;

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

transform: rotate(-45deg);

box-shadow: -6vmin 0 0 0.5vmin #3d90b2, -4vmin 0 0 0.5vmin #3d90b2, -2vmin 0 0 0.5vmin #3d90b2, 0 0 0 0.5vmin #3d90b2, 4vmin 0 0 0.5vmin #3d90b2, -6vmin 2vmin 0 0.5vmin #3d90b2, -4vmin 2vmin 0 0.5vmin #3d90b2, 0 2vmin 0 0.5vmin #3d90b2, 2vmin 2vmin 0 0.5vmin #3d90b2, 4vmin 2vmin 0 0.5vmin #3d90b2, 6vmin 2vmin 0 0.5vmin #3d90b2;

}

.c-awake {

background: #DAD9C8;

}

.c-awake:before {

display: block;

content: "";

width: 50%;

height: 50%;

background: -webkit-linear-gradient(top, #d18462 0%, #d18462 14%, #d2796a 15%, #d2796a 28%, #b56863 29%, #b56863 42%, #cf7486 43%, #cf7486 51%, #a9627c 52%, #a9627c 63%, #a16d8d 64%, #a16d8d 73%, #766d86 74%, #766d86 83%, #313d52 84%, #313d52 100%);

background: linear-gradient(to bottom, #d18462 0%, #d18462 14%, #d2796a 15%, #d2796a 28%, #b56863 29%, #b56863 42%, #cf7486 43%, #cf7486 51%, #a9627c 52%, #a9627c 63%, #a16d8d 64%, #a16d8d 73%, #766d86 74%, #766d86 83%, #313d52 84%, #313d52 100%);

border-radius: 50%;

position: absolute;

top: 20%;

left: 25%;

}

.c-montana {

background: #DAD9C8;

}

.c-montana:before {

display: block;

content: "";

position: absolute;

top: 20%;

left: 7.5%;

width: 85%;

height: 50%;

-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);

clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);

background: -webkit-linear-gradient(27deg, #32404c 0%, #32404c 46%, #746f85 46%, #746f85 50.5%, #9c708c 50.5%, #9c708c 55%, #a4657a 55%, #a4657a 59.5%, #cc7484 59.5%, #cc7484 64%, #b4695e 64%, #b4695e 71%, #ce7966 71%, #ce7966 100%);

background: linear-gradient(63deg, #32404c 0%, #32404c 46%, #746f85 46%, #746f85 50.5%, #9c708c 50.5%, #9c708c 55%, #a4657a 55%, #a4657a 59.5%, #cc7484 59.5%, #cc7484 64%, #b4695e 64%, #b4695e 71%, #ce7966 71%, #ce7966 100%);

}

.c-division {

background: -webkit-linear-gradient(45deg, #a45044 0%, #a45044 50%, #3d90b2 50%, #3d90b2 100%);

background: linear-gradient(45deg, #a45044 0%, #a45044 50%, #3d90b2 50%, #3d90b2 100%);

}

.c-division:before {

position: absolute;

display: block;

height: 40%;

width: 40%;

content: '';

background: #1e292f;

border-radius: 50%;

right: 8.8%;

top: 8.8%;

}

.c-division:after {

position: absolute;

display: block;

height: 12.2%;

width: 12.2%;

content: '';

background: #1e292f;

border-radius: 50%;

left: 31.1%;

bottom: 31.1%;

}

.c-division__inner-1 {

width: 0;

height: 0;

padding-top: 25%;

padding-bottom: 25%;

padding-left: 25%;

overflow: hidden;

}

.c-division__inner-1:after {

content: "";

display: block;

width: 0;

height: 0;

margin-top: -500px;

margin-left: -500px;

border-top: 500px solid transparent;

border-bottom: 500px solid transparent;

border-left: 500px solid #1e292f;

}

.c-division__inner-2 {

position: absolute;

right: 0;

width: 25%;

height: 0;

padding-top: 25%;

padding-bottom: 25%;

overflow: hidden;

}

.c-division__inner-2:after {

content: "";

display: block;

width: 0;

height: 0;

margin-top: -500px;

border-top: 500px solid transparent;

border-bottom: 500px solid transparent;

border-right: 500px solid #1e292f;

}

.c-epoch {

background: #ab4334;

}

.c-epoch:before {

display: block;

content: "";

position: absolute;

top: 31%;

left: 42.2%;

border-radius: 50%;

width: 14.6%;

height: 14.6%;

background: #e1e2d3;

}

.c-epoch:after {

display: block;

content: "";

position: absolute;

bottom: 0;

width: 100%;

height: 41.5%;

-webkit-clip-path: polygon(33% 0, 67% 0, 100% 100%, 0% 100%);

clip-path: polygon(33% 0, 67% 0, 100% 100%, 0% 100%);

background: #201f27;

}