android 菱形布局,HTML5 菱形布局的商品列表

CSS

语言：

CSSSCSS

确定

body {

background-color: #eeeeee;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

.elementWrapper {

overflow: hidden;

position: relative;

border-radius: 4px;

background: #dd6b8c;

padding: 0px;

width: 400px;

height: 600px;

box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.44);

display: flex;

}

.elementArrowWrapper {

width: 100%;

position: absolute;

bottom: 17%;

height: 21.5%;

text-align: center;

z-index: 5;

}

.elementArrow {

width: 150px;

height: 150px;

background: #000;

position: absolute;

transform-origin: center;

transition: all .7s ease;

opacity: 1;

}

.arrowLeft {

transform: translate(-73%) rotate(45deg);

}

.arrowLeft svg {

transform: rotate(-45deg) translate(79%, 125%);

}

.arrowRight svg {

transform: rotate(-45deg) translate(-307%, 125%);

}

.arrowRight {

right: 0;

transform: translate(73%) rotate(45deg);

}

.elementBackgroundWrapper {

width: 100%;

position: absolute;

bottom: 55%;

height: 22%;

text-align: center;

z-index: 1;

pointer-events: none;

}

.elementBackground {

width: 400px;

position: absolute;

z-index: -1;

opacity: .4;

height: 400px;

background-color: #fff;

transform: rotate(45deg);

}

.backgroundLeft {

transform: translate(-65%) rotate(45deg);

}

.backgroundRight {

right: 0;

transform: translate(65%) rotate(45deg);

}

.elementItemWrapper {

width: 100%;

position: absolute;

bottom: 40%;

height: 40%;

text-align: center;

z-index: 2;

}

.elementItem {

width: 150px;

height: 150px;

background: #fff;

position: absolute;

transform: translate(83.5%, 0%) rotate(45deg);

transform-origin: center;

transition: all .4s ease;

opacity: 1;

}

.elementItem img {

transform: rotate(-45deg);

max-width: 150px;

padding: 10px;

}

.elementContentWrapper {

width: 60%;

margin: 0 auto;

position: absolute;

transform: translate(34%, 0);

opacity: 1;

transition: all .4s ease;

}

.elementContentWrapper.left {

transform: translate(-40%, 100%);

opacity: 0;

}

.elementContentWrapper.right {

transform: translate(104%, 100%);

opacity: 0;

}

.elementItem.left {

transform: translate(0%, 82%) rotate(45deg);

opacity: .75;

}

.elementItem.right {

transform: translate(167%, 82%) rotate(45deg);

opacity: .75;

}

.elementItem.farRight {

transform: translate(250%, 0%) rotate(45deg);

opacity: .75;

}

.elementItem.superfarRight {

transform: translate(341%, -82%) rotate(45deg);

opacity: .0;

}

.elementItem.farLeft {

transform: translate(-82%, 0%) rotate(45deg);

opacity: .75;

}

.elementItem.superfarLeft {

transform: translate(-164%, -82%) rotate(45deg);

opacity: .0;

}

.elementContent {

width: 100%;

position: absolute;

bottom: 0;

height: 33.6%;

text-align: center;

z-index: 2;

}

.elementContent:before {

content: '';

width: 400px;

position: absolute;

z-index: -1;

left: 0;

height: 400px;

background-color: #fff;

transform: rotate(45deg);

}

.elementContent:after {

content: '';

width: 400px;

position: absolute;

z-index: -17;

top: -122%;

left: 0;

height: 400px;

border: 1px solid #fff;

/* background-color: #E91E63; */

transform: rotate(45deg);

}

img {

width: 100%;

}

.loadPage {

position: absolute;

width: 100%;

height: 100%;

z-index: 10;

display: flex;

left: 0;

top: 0;

justify-content: center;

align-items: center;

background: rgb(251, 173, 196);

pointer-events: none;

}

.loadPage {

transition: all .5s ease;

}

.loadPage img {

max-width: 200px;

}