有人可以告诉我是否可以仅使用Html和CSS将两者结合为一体? (通过自动播放,动画或任何其他可能的方式)这个问题似乎在过去出现,但始终没有答案。这就是我去的地方。
https://jsfiddle.net/e0g4a1w1/10/?utm_source=website&utm_medium=embed&utm_campaign=e0g4a1w1
<ul class="rotator">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div class= "rotator">
<span id="item-1"></span>
<span id="item-2"></span>
<span id="item-3"></span>
<div class="carousel-item item-1">
<a class="arrow-prev" href="#item-3"><svg width="30" height="30" viewBox="0
0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-
12.17-11.996z"/></svg></a>
<span>Item 1</span>
<a class="arrow-next" href="#item-2"><svg width="30" height="30" viewBox="0
0 24 24"><path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829
12.17 11.996z"/></svg></a>
</div>
<div class="carousel-item item-2">
<a class="arrow-prev" href="#item-1"><svg width="30" height="30" viewBox="0
0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-
12.17-11.996z"/></svg></a>
<span>Item 2</span>
<a class="arrow-next" href="#item-3"><svg width="30" height="30" viewBox="0
0 24 24"><path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829
12.17 11.996z"/></svg></a>
</div>
<div class="carousel-item item-3">
<a class="arrow-prev" href="#item-2"><svg width="30" height="30" viewBox="0
0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-
12.17-11.996z"/></svg></a>
<span>Item 3</span>
<a class="arrow-next" href="#item-1"><svg width="30" height="30" viewBox="0
0 24 24"><path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829
12.17 11.996z"/></svg></a>
</div>
</div>
----
CSS
---
.rotator {
list-style: none;
font-size: 65px;
position: absolute;
z-index: 1;
top: 35%;
width: 100%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.rotator > li {
position: absolute;
opacity: 0;
top: 35%;
width: 100%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.rotator > li:first-child {
animation: loop 7s infinite;
}
.rotator > li:nth-child(2) {
animation: opsecond 7s infinite;
}
.rotator > li:last-child {
animation: oplast 7s infinite;
}
@keyframes loop {
0% { opacity: 0; }
10% { opacity: 1; }
33% { opacity: 1; }
44% { opacity: 0; }
}
@keyframes opsecond {
33% { opacity: 0; }
44% { opacity: 1; }
66% { opacity: 1; }
77% { opacity: 0; }
}
@keyframes oplast {
66% { opacity: 0; }
77% { opacity: 1; }
100% { opacity: 1; }
0% { opacity: 1; }
10% { opacity: 0; }
}
.carousel-wrapper{
height:300px;
position:relative;
width:400px;
}
.carousel-item{
position:absolute;
top: 35%;
width: 100%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
opacity:0;
transition: all 0.5s ease-in-out;
}
[id^="item"] {
display: none;
}
.item-1 {
z-index: 2;
opacity: 1;
}
*:target ~ .item-1 {
opacity: 0;
}
#item-1:target ~ .item-1 {
opacity: 1;
}
#item-2:target ~ .item-2, #item-3:target ~ .item-3 {
z-index: 3;
opacity: 1;
}
最佳答案
是接近您正在寻找的东西,所以也许这可以帮助您:
https://codepen.io/miriamcc/pen/KzGGqZ
.image {
width: 100%;
height: 200px;
}
.radio {
/*display: none;*/
}
.images {
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
}
.images-inner {
width: 500%;
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
.image-slide {
width: 20%;
float: left;
}
.image-slide,
.fake-radio,
.radio-btn {
transition: all 0.5s ease-out;
}
.fake-radio {
float: right;
}
/* Move slides overflowed container */
#slide1:checked ~ .images .images-inner {
margin-left: 0;
}
#slide2:checked ~ .images .images-inner {
margin-left: -100%;
}
#slide3:checked ~ .images .images-inner {
margin-left: -200%;
}
/* Color of bullets */
#slide1:checked ~ div .fake-radio .radio-btn:nth-child(1),
#slide2:checked ~ div .fake-radio .radio-btn:nth-child(2),
#slide3:checked ~ div .fake-radio .radio-btn:nth-child(3) {
background: red;
}
.radio-btn {
width: 9px;
height: 9px;
border-radius: 5px;
background: gray;
display: inline-block !important;
margin: 0 1px;
cursor: pointer;
}
/* Color of bullets - END */
/* Text of slides */
#slide1:checked ~ .labels .label:nth-child(1),
#slide2:checked ~ .labels .label:nth-child(2),
#slide3:checked ~ .labels .label:nth-child(3) {
opacity: 1;
}
.label {
opacity: 0;
position: absolute;
}
/* Text of slides - END */
/* Calculate AUTOPLAY for BULLETS */
@keyframes bullet {
0%, 33.32333333333334% {
background: red;
}
33.333333333333336%, 100% {
background: gray;
}
}
#play1:checked ~ div .fake-radio .radio-btn:nth-child(1) {
animation: bullet 12300ms infinite -1000ms;
}
#play1:checked ~ div .fake-radio .radio-btn:nth-child(2) {
animation: bullet 12300ms infinite 3100ms;
}
#play1:checked ~ div .fake-radio .radio-btn:nth-child(3) {
animation: bullet 12300ms infinite 7200ms;
}
/* Calculate AUTOPLAY for BULLETS - END */
/* Calculate AUTOPLAY for SLIDES */
@keyframes slide {
0%, 25.203252032520325% { margin-left: 0; }
33.333333333333336%, 58.53658536585366% { margin-left: -100%; }
66.66666666666667%, 91.869918699187% { margin-left: -200%; }
}
.st-slider > #play1:checked ~ .images .images-inner {
animation: slide 12300ms infinite;
}
/* Calculate AUTOPLAY for SLIDES - END */
/* Calculate AUTOPLAY for CAPTION */
@keyframes caption {
0%, 33.32333333333334% {
opacity: 1;
}
33.333333333333336%, 100% {
opacity: 0;
}
}
#play1:checked ~ .labels .label:nth-child(1) {
animation: caption 12300ms infinite -1000ms;
}
#play1:checked ~ .labels .label:nth-child(2) {
animation: caption 12300ms infinite 3100ms;
}
#play1:checked ~ .labels .label:nth-child(3) {
animation: caption 12300ms infinite 7200ms;
}
/* Calculate AUTOPLAY for CAPTION - END */
<h1>Pure CSS slider</h1><pre>(with Autoplay at the beginning)</pre><br>
<div id="homepage-slider" class="st-slider">
<input type="radio" class="cs_anchor radio" name="slider" id="slide1"/>
<input type="radio" class="cs_anchor radio" name="slider" id="slide2"/>
<input type="radio" class="cs_anchor radio" name="slider" id="slide3"/>
<input type="radio" class="cs_anchor radio" name="slider" id="play1" checked=""/>
<div class="images">
<div class="images-inner">
<div class="image-slide">
<div class="image bg-yellow" style="background-color:yellow;">image slide 1</div>
</div>
<div class="image-slide">
<div class="image bg-blue" style="background-color:pink;">imager slide 2</div>
</div>
<div class="image-slide">
<div class="image bg-red" style="background-color:orange;">image slide 3</div>
</div>
</div>
</div>
<div class="labels">
<label for="slide1" class="label">text slide 1</label>
<label for="slide2" class="label">text slide 2</label>
<label for="slide3" class="label">text slide 3</label>
<div class="fake-radio">
<label for="slide1" class="radio-btn"></label>
<label for="slide2" class="radio-btn"></label>
<label for="slide3" class="radio-btn"></label>
</div>
</div>
</div>
确实很好,但我也需要在移动设备上使用,当您使用圆点时,此codepen将不再自动播放。
关于html - 纯CSS滑块/轮播/带有自动播放功能的幻灯片/动画和导航,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49226897/