我找到了一个纯CSS横幅滑块,可以在代码笔中很好地工作。我已经将HTML和CSS的代码复制到了一页,但是它不起作用。所有图像都是外部的,并且可用。它没有任何Js等,只有html和css。您可能会在这里{@ 3}看到它的完美表现。
<head>
</head>
<style>
.wrapper {
position: relative;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.slideshow {
position: absolute;
top: 0;
left: 50%;
width: 100%;
height: 100%;
transform: translateX(-50%);
&--hero {
z-index: 3;
left: 0;
top: 50%;
// width: 100%;
height: 85%;
transform: translateY(-50%) skewY(-10deg);
transform-origin: center;
overflow: hidden;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
.slides {
position: absolute;
left: 0;
top: -10%;
width: 100vw;
height: 100vh;
animation: 11s slideshow-hero-mobile -3s infinite;
}
.slide1 {
background-image: url(2.jpg);
animation: 20s slides-set-1 -0.1s infinite;
}
.slide2 {
background-image: url(3.jpg);
animation: 20s slides-set-2 -0.1s infinite;
}
.slide3 {
background-image: url(4.jpg);
animation: 20s slides-set-3 -0.1s infinite;
}
@media (min-width: 600px) {
left: 50%;
top: 0;
width: 67%;
height: 100%;
transform: translateX(-50%) skewX(-10deg);
.slides {
top: 0;
left: -25%;
height: 100%;
animation: 11s slideshow-hero -3s infinite;
}
}
}
&--contrast {
z-index: 1;
width: 100%;
height: 50%;
transform: none;
.slide {
filter: blur(3px);
}
&--before {
left: 0;
.slides {
width: 100vw;
}
}
&--after {
z-index: 2;
left: auto;
right: 0;
.slides {
width: 100vw;
left: auto;
right: 0;
}
}
.slides {
animation: 14s slideshow-contrast -5s infinite;
}
.slide1 {
background-image: linear-gradient(to bottom, rgba(200,200,75,0.25) 0, rgba(200,75,80,0.5) 100%), url(https://source.unsplash.com/1000x750);
// background-image: url(../img/slideshow/hero-1.jpg);
animation: 20s slides-set-1 -0.2s infinite;
}
.slide2 {
background-image: linear-gradient(to bottom, rgba(200,200,75,0.25) 0, rgba(50,50,50,0.5) 100%), url(https://source.unsplash.com/1001x751);
// background-image: url(../img/slideshow/hero-2.jpg);
animation: 20s slides-set-2 -0.2s infinite;
}
.slide3 {
background-image: linear-gradient(to bottom, rgba(100,100,75,0.25) 0, rgba(50,50,50,0.5) 100%), url(https://source.unsplash.com/1002x752);
// background-image: url(../img/slideshow/hero-3.jpg);
animation: 20s slides-set-3 -0.2s infinite;
}
&--after {
top: auto;
bottom: 0;
.slides {
animation: 13s slideshow-contrast -13s infinite;
}
.slide {
background-position: right;
}
.slide1 {
animation: 20s slides-set-1 infinite;
}
.slide2 {
animation: 20s slides-set-2 infinite;
}
.slide3 {
animation: 20s slides-set-3 infinite;
}
}
@media (min-width: 600px) {
width: 50%;
height: 100%;
&--after {
top: 0;
bottom: auto;
.slides {
width: 50vw;
}
}
}
}
}
.slides,
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
@keyframes slideshow-hero-mobile {
0% {
transform: scale(1) skewY(10deg);
}
50% {
transform: scale(1.05) skewY(10deg);
}
100% {
transform: scale(1) skewY(10deg);
}
}
@keyframes slideshow-hero {
0% {
transform: scale(1) skewX(10deg);
}
50% {
transform: scale(1.05) skewX(10deg);
}
100% {
transform: scale(1) skewX(10deg);
}
}
@keyframes slideshow-contrast {
0% {
transform: scale(1.05);
}
50% {
transform: scale(1);
}
100% {
transform: scale(1.05);
}
}
@keyframes slides-set-1 {
0% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
31% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
34% {
opacity: 0;
// transform: translateY(100px);
transform: scale(1.05);
}
97% {
opacity: 0;
// transform: translateY(-100px);
transform: scale(1.05);
}
100% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
}
@keyframes slides-set-2 {
0% {
opacity: 0;
// transform: translateY(-100px);
transform: scale(1.05);
}
31% {
opacity: 0;
// transform: translateY(-100px);
transform: scale(1.05);
}
34% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
64% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
67% {
opacity: 0;
// transform: translateY(100px);
transform: scale(1.05);
}
100% {
opacity: 0;
// transform: translateY(100px);
transform: scale(1.05);
}
}
@keyframes slides-set-3 {
0% {
opacity: 0;
// transform: translateY(-100px);
transform: scale(1.05);
}
64% {
opacity: 0;
// transform: translateY(-100px);
transform: scale(1.05);
}
67% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
97% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
100% {
opacity: 0;
// transform: translateY(100px);
transform: scale(1.05);
}
}
</style>
<html>
<body>
asdasd
<div class="wrapper">
<div class="slideshows">
<div class="slideshow slideshow--hero">
<div class="slides">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</div>
</div>
<div class="slideshow slideshow--contrast slideshow--contrast--before">
<div class="slides">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</div>
</div>
<div class="slideshow slideshow--contrast slideshow--contrast--after">
<div class="slides">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分:1)
您的html
标记必须位于代码的开头,才能使css部分正常运行。
答案 1 :(得分:1)
尝试添加此CSS链接。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/10up-sanitize.css/8.0.0/sanitize.min.css">
这也是SCSS Codepen,而不是CSS。如果要让CSS工作,则必须对其进行转换