<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 菱形布局的商品列表</title>
<style>
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;
}
</style>
</head>
<body>
<script src="js/jquery-1.11.1.min.js"></script>
<!-- insperation https://dribbble.com/shots/2575761-Webshop-UI-UX-experiments -->
<div class="loadPage shown">
<img src="images/cupcake1.png" />
</div>
<div class="elementWrapper">
<div class="elementItemWrapper">
<div class="elementItem superfarLeft"><img src="images/cupcake1.png" />
</div>
<div class="elementItem farLeft">
<img src="images/cupcake1.png" />
</div>
<div class="elementItem left">
<img src="images/cupcake2.png" />
</div>
<div class="elementItem active">
<img src="images/cupcake3.png" />
</div>
<div class="elementItem right"><img src="images/cupcake4.png" />
</div>
<div class="elementItem farRight"><img src="images/cupcake1.png" />
</div>
<div class="elementItem superfarRight">
<img src="images/cupcake3.png" />
</div>
</div>
<div class="elementArrowWrapper">
<div class="elementArrow arrowLeft">
<svg enable-background="new 0 0 32 32" height="32px" id="Layer_1" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
<path d="M7.701,14.276l9.586-9.585c0.879-0.878,2.317-0.878,3.195,0l0.801,0.8c0.878,0.877,0.878,2.316,0,3.194 L13.968,16l7.315,7.315c0.878,0.878,0.878,2.317,0,3.194l-0.801,0.8c-0.878,0.879-2.316,0.879-3.195,0l-9.586-9.587 C7.229,17.252,7.02,16.62,7.054,16C7.02,15.38,7.229,14.748,7.701,14.276z"
fill="#fff" />
</svg>
</div>
<div class="elementArrow arrowRight">
<svg enable-background="new 0 0 32 32" height="32px" id="Layer_1" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
<path d="M24.291,14.276L14.705,4.69c-0.878-0.878-2.317-0.878-3.195,0l-0.8,0.8c-0.878,0.877-0.878,2.316,0,3.194 L18.024,16l-7.315,7.315c-0.878,0.878-0.878,2.317,0,3.194l0.8,0.8c0.878,0.879,2.317,0.879,3.195,0l9.586-9.587 c0.472-0.471,0.682-1.103,0.647-1.723C24.973,15.38,24.763,14.748,24.291,14.276z"
fill="#fff" />
</svg>
</div>
</div>
<div class="elementBackgroundWrapper">
<div class="elementBackground backgroundLeft">
</div>
<div class="elementBackground backgroundRight">
</div>
</div>
<div class="elementContent">
<div class="elementContentWrapper left">
<p>subtitle</p>
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Summum a vobis bonum voluptas dicitur.</p>
</div>
<div class="elementContentWrapper active">
<p>subtitle</p>
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Summum a vobis bonum voluptas dicitur.</p>
</div>
<div class="elementContentWrapper right">
<p>subtitle</p>
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Summum a vobis bonum voluptas dicitur.</p>
</div>
</div>
</div>
<script>
$('.arrowRight').click(function() {
var elsuperfarLeft = $('.elementItem.superfarLeft');
var elfarLeft = $('.elementItem.farLeft');
var elLeft = $('.elementItem.left');
var elMiddle = $('.elementItem.active');
var elRight = $('.elementItem.right');
var elfarRight = $('.elementItem.farRight');
var elsuperfarRight = $('.e
HTML5实现的菱形布局商品列表切换展示效果源码.zip
版权申诉
47 浏览量
2022-11-04
23:38:39
上传
评论
收藏 364KB ZIP 举报
HTML5实现的菱形布局商品列表切换展示效果源码.zip （6个子文件） 
132677732347952053 images 
cupcake3.png 74KB cupcake4.png 86KB cupcake1.png 87KB cupcake2.png 83KB
index.html 10KB js 
jquery-1.11.1.min.js 94KB资源评论
