持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情
前言
今天在武汉某商场溜达的时候，发现某运动品牌的展示架做的非常有个性，回家之后左思右想，想到了一个复刻的方法，不知道最终的效果如何。写一点代码就写一点文章吧。
文章中使用的图片可以在百度搜关键词
运动鞋 png就会展示出各大品牌运动鞋的png图片供你下载了。
文章中使用的字体是
google CDN提供的，可以直接引入CDN链接即可使用。@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700');
先看效果吧
背景方格
👉 列表展示的方法有很多种，我选用了最简单的 ul 标签
<ul></ul>
👉 ul 标签中直接使用 svg 画出背景方格，布局就直接使用 grid 的显示方式
ul {
display: grid;
grid-template-columns: repeat(var(--columns), 1fr);
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 600 1040' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'%3E%3Cpath d='M0 0l300 173.205v346.41L0 346.41V0z' fill='url(%23_Linear1)'/%3E%3Cpath d='M300 519.615L600 692.82v346.411L300 866.025v-346.41z' fill='url(%23_Linear2)'/%3E%3Cpath d='M600 0L300 173.205v346.41L600 346.41V0z' fill='url(%23_Linear3)'/%3E%3Cpath d='M300 519.615L0 692.82v346.411l300-173.206v-346.41z' fill='url(%23_Linear4)'/%3E%3Cdefs%3E%3ClinearGradient id='_Linear1' x1='0' y1='0' x2='1' y2='0' gradientUnits='userSpaceOnUse' gradientTransform='rotate(-30 646.41 173.205) scale(346.41)'%3E%3Cstop offset='0' stop-color='%23b7ccc3'/%3E%3Cstop offset='1' stop-color='%23cde2d9'/%3E%3C/linearGradient%3E%3ClinearGradient id='_Linear2' x1='0' y1='0' x2='1' y2='0' gradientUnits='userSpaceOnUse' gradientTransform='rotate(-30 1766.025 -126.796) scale(346.41)'%3E%3Cstop offset='0' stop-color='%23b7ccc3'/%3E%3Cstop offset='1' stop-color='%23cde2d9'/%3E%3C/linearGradient%3E%3ClinearGradient id='_Linear3' x1='0' y1='0' x2='1' y2='0' gradientUnits='userSpaceOnUse' gradientTransform='rotate(-150 346.41 92.82) scale(346.41)'%3E%3Cstop offset='0' stop-color='%23e8dad1'/%3E%3Cstop offset='1' stop-color='%23fff0e7'/%3E%3C/linearGradient%3E%3ClinearGradient id='_Linear4' x1='0' y1='0' x2='1' y2='0' gradientUnits='userSpaceOnUse' gradientTransform='rotate(-150 266.025 392.82) scale(346.41)'%3E%3Cstop offset='0' stop-color='%23e8dad1'/%3E%3Cstop offset='1' stop-color='%23fff0e7'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
background-size: calc(200%/(var(--columns)));
}
👆 大家可以直接把svg链接放到浏览器中打开，就是下面的效果了
展示鞋柜
👉 使用 li 标签来渲染鞋子的图片
<li class="adidas">
<img src='./image/adidas01.png' alt='' />
</li>
<li class="tiger">
<img src='./image/tiger05.png' alt='' />
</li>
👉 使用 grid-column-end 样式标签来设置网格元素
li {
grid-column-end: span 2;
position: relative;
padding-bottom: 86.66%;
}
👉 除了配置网格元素之外，我们还需要额外计算不同 li 标签位置的网格效果
li:nth-child(2n-1) {
grid-column-start: 2;
}
👉 鞋子直接就是 png 图片渲染出来的
img {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 62%;
bottom: -10%;
-webkit-filter: drop-shadow(0 50px 20px rgba(0, 0, 0, 0.20));
filter: drop-shadow(0 50px 20px rgba(0, 0, 0, 0.20));
transition-property: bottom, filter, -webkit-filter;
transition-duration: .3s;
}
👉 当鼠标移动到鞋子上时，给鞋子做一个动画效果吧
img:hover {
bottom: 0;
-webkit-filter: drop-shadow(0 80px 40px rgba(0, 0, 0, 0.20));
filter: drop-shadow(0 80px 30px rgba(0, 0, 0, 0.20));
}
显示品牌logo和文案价格
-
鞋子展示位刚好是一个夹角处，所以我们可以在夹角的两个面做一些不同的效果
-
左边夹角可以显示鞋子型号和价格，右边夹角可以显示品牌logo
-
这样可以很直观的知道当前展示位的鞋子的不同信息
👉 品牌logo可以直接通过 li 标签样式的before属性定位显示一个图片背景
👉 可以根据不同的品牌样式的 li 标签显示不同的图片背景
li:before {
content: "";
position: absolute;
right: 0;
width: 50%;
height: 100%;
background-image: url(./image/adidas.png);
background-position: 90% 27%;
opacity: 0.6;
transform: skewy(30deg);
background-size: 40%;
background-repeat: no-repeat;
}
.adidas:before {
background-image: url(./image/adidas.png);
}
.tiger:before {
background-image: url(./image/tiger.png);
}
👉 文案和价格就直接使用div标签包裹起来，这样容易定义样式
<li class="adidas">
<div>
<h2>adidas01</h2>
<p>￥99.95</p>
</div>
<img src='./image/adidas01.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>tiger05</h2>
<p>￥95.00</p>
</div>
<img src='./image/tiger05.png' alt='' />
</li>
👉 将文字定位之后，还需要使用 transform 中的 skewy 给文字一定的倾斜角度，这样就可以完美适配左侧夹角了
div {
position: absolute;
width: 50%;
font-size: calc(15vw/var(--columns));
transform: skewy(-30deg);
margin-top: 14%;
padding: 3%;
}
p {
font-size: 2em;
}
如果你需要下拉展示更多，可以循环
li标签即可。
