生活中我们所见到的大部分图形都可以用css实现，今天给大家分享的是实现电商商品图片幻灯片特效。
效果演示：主页获取源码
代码目录：
主要代码实现：
CSS样式：
*,
*::after,
*::before {
box-sizing: border-box;
}
html {
background: #fff;
}
body {
--color-text: #000;
--color-bg: #fff;
--color-link: #000;
--color-link-hover: #858585;
--color-nav-bg: #fff;
--color-nav-hover: #858585;
--color-cart-bg: #000;
--color-cart: #fff;
--color-details-hover: #858585;
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
min-height: 100vh;
color: #57585c;
color: var(--color-text);
background-color: #fff;
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
a {
text-decoration: none;
color: var(--color-link);
outline: none;
}
a:hover,
a:focus {
color: var(--color-link-hover);
}
button:focus,
a:focus {
outline: none;
}
.hidden {
position: absolute;
overflow: hidden;
width: 0;
height: 0;
pointer-events: none;
}
/* Icons */
.icon {
display: block;
width: 1.5em;
height: 1.5em;
margin: 0 auto;
fill: currentColor;
}
main {
position: relative;
width: 100%;
}
.content {
text-align: center;
}
.info {
display: block;
max-width: 260px;
margin: 0 1rem;
font-weight: bold;
}
.page-header__title {
font-size: 1rem;
margin: 0;
}
.page-header__title-inner {
position: relative;
line-height: 1.25;
margin: 0 0.5rem 0 0;
padding: 0 1rem 0 0;
}
.page-header__title-inner::after {
content: "";
right: 0;
width: 3px;
height: 1.25rem;
background: currentColor;
position: absolute;
}
.page-header__title-sub {
position: relative;
}
.social {
display: none;
}
.social__item {
display: block;
font-size: 0.75rem;
margin: 0 0.25rem;
}
.slideshow {
position: relative;
width: 100%;
margin-top: 1rem;
}
.slideshow::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 1000;
opacity: 0;
transition: opacity 0.4s;
}
.slideshow--details::after {
opacity: 1;
}
.slide {
width: 100%;
height: 50vh;
top: 0;
left: 0;
position: absolute;
overflow-x: hidden;
pointer-events: none;
opacity: 0;
}
.slide--current {
opacity: 1;
z-index: 999;
pointer-events: auto;
position: relative;
}
.slide__wrap {
width: 100%;
height: 50vh;
overflow: hidden;
position: relative;
}
.slide__bg,
.slide__img {
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: white;
background-size: cover;
background-position: 50% 50%;
position: absolute;
pointer-events: none;
}
.slide__bg {
filter: grayscale(1) brightness(0.7);
}
.slide__title-wrap {
padding: 2rem 1rem 0;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.slide__title {
margin: 0;
font-size: 3.5rem;
line-height: 0.9;
white-space: pre;
text-align: left;
}
.slide__title span {
display: inline-block;
}
.slide__subtitle {
font-size: 1.15rem;
font-weight: normal;
text-align: left;
}
.boxnav__item--prev:hover,
.boxnav__item--next:hover {
color: var(--color-nav-hover);
}
.boxnav__item:focus {
outline: none;
}
.boxnav__label {
padding: 0 0.5rem;
font-size: 1.15rem;
position: relative;
}
.details {
position: absolute;
top: 0;
right: 0;
width: 100%;
display: grid;
grid-auto-rows: 80px;
overflow: hidden;
}
.details-wrap--open .details--current {
pointer-events: auto;
}
.details__inner {
display: flex;
align-items: center;
justify-content: space-around;
transform: translate3d(100%, 0, 0);
}
.details__item-img {
display: none;
}
.details__inner--sizes {
background: #d4d4d4;
}
.details__inner--price {
background: #6ff8ed;
color: rgb(2, 2, 2);
font-size: 1.55rem;
}
.details__inner--colors {
background: rgba(255, 255, 255, 0.007);
backdrop-filter: blur(20px);
}
.details__color--WhiteBlack {
background: rgb(255, 255, 255);
background: linear-gradient( 90deg, rgba(255, 255, 255, 1) 20%, rgba(0, 0, 0, 1) 100%);
}
.details__color--WhiteGreenBlack {
background: rgb(255, 255, 255);
background: linear-gradient( 90deg, rgba(255, 255, 255, 1) 10%, rgb(4, 233, 138) 45%, rgb(0, 0, 0) 100%);
}
.details__color--red {
background: #ff0000;
}
.details__color--green {
background: #32f8a5;
}
.details__color--sky {
background: #add8e6;
}
.details__inner--grid {
display: grid;
padding: 1rem;
grid-template-columns: repeat(3, 1fr);
}
.action {
border: 0;
padding: 0;
flex: 1;
align-self: stretch;
background: none;
}
.action--addtocart {
background: #6ff8ed;
color: var(--color-cart-bg);
}
.action--close {
background: var(--color-cart-bg);
color: #6ff8ed;
text-transform: lowercase;
}
.action--details {
position: absolute;
z-index: 3000;
top: 100%;
font-weight: bold;
font-size: 1.15rem;
width: 100%;
background: #000;
padding: 1rem;
color: #fff;
}
.content--fixed {
position: fixed;
z-index: 10000;
top: 0;
left: 0;
display: grid;
align-content: space-between;
width: 100%;
max-width: none;
min-height: 0;
height: 100vh;
padding: 1.5rem 4rem 2rem;
pointer-events: none;
align-items: start;
grid-template-columns: 50% 50%;
grid-template-rows: auto auto auto;
grid-template-areas: "pageheader ..." "... ..." "tagline ...";
}
.page-header {
grid-area: pageheader;
align-self: start;
justify-self: start;
position: relative;
display: flex;
padding: 1.25rem 1.5rem 1.25rem 0;
pointer-events: none;
}
.page-header::before {
content: "";
background: #000;
width: calc(100% + 4rem);
height: 100%;
position: absolute;
left: -4rem;
top: 0;
transform: translate3d(-100%, 0, 0) translate3d(2rem, 0, 0);
transition: transform 0.3s;
pointer-events: auto;
}
.page-header:hover::before {
transform: translate3d(0, 0, 0);
}
.page-header::after {
content: "";
width: 17rem;
height: 100%;
position: absolute;
left: -2rem;
top: 0;
pointer-events: auto;
}
.page-header__title {
transition: color 0.3s;
}
.page-header:hover .page-header__title {
color: #fff;
}
.social {
display: flex;
list-style: none;
margin: 0 0 0 3rem;
padding: 0;
position: relative;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.social__item-link {
color: #fff;
}
.icon--social {
opacity: 0;
transform: translate3d(0, 150%, 0);
transition: opacity 0.2s linear, transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
transition-delay: 0.05s;
}
.icon--instagram {
transition-delay: 0.1s;
}
.slide__title-wrap {
padding: calc(6rem + 10vh) 0 0 4rem;
text-align: left;
}
.slide__title {
font-size: 4.5vw;
}
.slide__subtitle {
margin: 1rem 0 0 0.2rem;
max-width: 300px;
}
.slide__wrap {
height: 100%;
position: absolute;
}
.slide__bg,
.slide__img {
background-position: 50% 70%;
}
.boxnav {
left: auto;
right: 60vw;
width: auto;
}
.boxnav__item {
width: 10vw;
height: 12vw;
flex: none;
}
.details-wrap {
position: absolute;
top: 0;
right: 0;
pointer-events: none;
}
.details {
width: auto;
grid-template-columns: 8rem 15rem 200px;
grid-template-rows: 125px 125px 7rem 3.5rem;
}
.action--details {
top: calc(6rem + 10vh);
right: 4rem;
left: auto;
background: none;
color: inherit;
width: auto;
padding: 0;
}
.action--details:hover {
color: var(--color-details-hover);
}
}
复制代码
部分HTML代码 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>eCommerce Slide Effect -> GSAP & JS</title>
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<svg class="hidden">
<symbol id="icon-arrow" viewBox="0 0 24 24">
<title>arrow</title>
<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 " />
</symbol>
</svg>
<main>
<div class="content content--fixed">
<div class="page-header">
<h1 class="page-header__title">
<span class="page-header__title-inner">LikeNuShus</span>
<span class="page-header__title-sub">man & woman</span>
</h1>
<ul class="social">
<li class="social__item">
<a class="social__item-link" href="https://www.17sucai.com/" target="_blank">
<svg class="icon icon--social icon--codepen">
<use xlink:href="#icon-codepen"></use>
</svg>
</a>
</li>
</ul>
</div>
<p class="tagline">轻用鞋，便宜！</p>
</div>
<div class="slideshow">
<div class="slide">
<div class="slide__wrap">
<div class="slide__img" style="background-image: url(img/1.jpg);"></div>
<div class="slide__title-wrap">
<h3 class="slide__title">Asics</h3>
<h4 class="slide__subtitle">#AnimaSanaInCorporeSano.</h4>
</div>
</div>
</div>
<div class="slide">
<div class="slide__wrap">
<div class="slide__img" style="background-image: url(img/2.jpg);"></div>
<div class="slide__title-wrap">
<h3 class="slide__title">Adidas</h3>
<h4 class="slide__subtitle">#ImpossibleIsNothing</h4>
</div>
</div>
</div>
<div class="slide">
<div class="slide__wrap">
<div class="slide__img" style="background-image: url(img/3.jpg);"></div>
<div class="slide__title-wrap">
<h3 class="slide__title">Nike</h3>
<h4 class="slide__subtitle">#JustDoIt</h4>
</div>
</div>
</div>
</div>
<!-- /slideshow -->
<nav class="boxnav">
<button class="boxnav__item boxnav__item--prev">
<svg class="icon icon--caret">
<use xlink:href="#icon-caret"></use>
</svg>
</button>
<div class="boxnav__item boxnav__item--label">
<span class="boxnav__label boxnav__label--current">1</span>
<span class="boxnav__label boxnav__label--total"></span>
</div>
<button class="boxnav__item boxnav__item--next">
<svg class="icon icon--caret-rot">
<use xlink:href="#icon-caret"></use>
</svg>
</button>
</nav>
<button class="action action--details">+ 查看详情</button>
<!-- details -->
<div class="details-wrap">
<div class="details">
<div class="details__item details__item-img" data-direction="ttb">
<div class="details__inner">
<img src="img/s1.jpg" alt="Some image" />
</div>
</div>
</div>
<!-- /details -->
<div class="details">
<div class="details__item details__item-img" data-direction="ttb">
<div class="details__inner">
<img src="img/s2.jpg" alt="Some image" />
</div>
</div>
<div class="details__item details__item-sizes">
<div class="details__inner details__inner--sizes">
<span class="details__size">6</span>
<span class="details__size details__size--disabled">6.5</span>
<span class="details__size">7</span>
<span class="details__size">7.5</span>
<span class="details__size details__size--selected">8</span>
<span class="details__size">9</span>
<span class="details__size details__size--disabled">9.5</span>
<span class="details__size details__size--disabled">10</span>
</div>
</div>
<div class="details__item details__item--addtocart" data-direction="ttb">
<div class="details__inner">
<button class="action action--addtocart">
<svg class="icon icon--cart">
<use xlink:href="#icon-cart"></use>
</svg>
</button>
</div>
</div>
<div class="details__item details__item-colors" data-direction="ttb">
<div class="details__inner details__inner--grid details__inner--colors">
<span class="details__color details__color--WhiteBlack">White and Black</span>
<span class="details__color details__color--BlueBlack">Blue and Black</span>
<span class="details__color details__color--PinkBlack">Pink and Black</span>
</div>
</div>
<div class="details__item details__item-price">
<div class="details__inner details__inner--price">$30</div>
</div>
<div class="details__item details__item--close" data-direction="ttb">
<div class="details__inner">
<button class="action action--close">关闭</button>
</div>
</div>
</div>
</main>
<script src='js/gsap.min.js'></script>
<script src='js/imagesloaded.pkgd.min.js'></script>
<script src="js/script.js"></script>
</body>
</html>
复制代码
点赞支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。
如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star: http://github.crmeb.net/u/defu不胜感激 ！
扫一扫
1459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
