滑块上的淡入淡出动画不起作用(仅限CSS3和html5 )
滑块上的淡入淡出动画不起作用(仅限CSS3和html5 )
提问于 2018-05-30 04:24:22
我是一个CSS3和HTML5的初学者，现在我正在尝试创建一个HTML5和CSS3网站，以便编码一个私营部门司的模型。
当我开始使用滑块时，问题就出现了。通常情况下，它应该是一个有2个图像的旋转木马滑块，底部有一个进度条和一个动画，使它在循环中工作。
所以，首先我创建了一个主div，里面有另外两个包含无线输入的div，这样我就可以让下一个和前一个箭头工作，以便从一个幻灯片转到另一个幻灯片。
然后，在我的css文件中，我已经创建了带有不透明效果的@keyframe来处理淡入淡出动画。不幸的是，这并不像我想的那样工作，只有箭头而不是淡入淡出动画。
有人能帮我看看我的代码吗？我会非常感谢的！
下面是我的HTML5代码：
@keyframes click{
0%{ opacity:.4;}
100%{opacity:1;}
}
@keyframes fade{
0% {opacity:1}
45% { opacity: 1}
50% { opacity: 0}
95% {opacity:0}
100% { opacity: 1}
}
@keyframes fade2{
0% {opacity:0}
45% { opacity: 0}
50% { opacity: 1}
95% { opacity: 1 }
100% { opacity:0}
}
#i1, #i2{ display: none;}
.slider{
width: 100%;
height: 550px;
margin: 20px auto;
position: rela
}
#first, #second{
position: absolute;
width: 100%;
height: 100%;
}
.previous{
width: 35px;
height: 70px;
position: absolute;
top:40%;
left:0;
background-color: rgba(70, 70, 70,0.6);
border-radius: 0px 50px 50px 0px;
}
.next{
width: 35px;
height: 70px;
position: absolute;
top:40%;
right: 0;
background-color: rgba(70, 70, 70,0.6);
border-radius: 50px 0px 0px 50px;
}
.prev:hover, .next:hover{
transition: .3s;
background-color: rgba(99, 99, 99, 1);
}
.fas.fa-chevron-left{
position: absolute;
left : 0;
top: 30%;
margin-left: 5px;
color: #fff;
font-size: 30px;
}
.fas.fa-chevron-right{
position: absolute;
right: 0;
top: 30%;
margin-right: 5px;
color: white;
font-size: 30px;
}
.slider div#first {
background: url('img1.jpg') no-repeat center;
background-size: cover;
animation:fade 30000s infinite linear;
-webkit-animation:fade 30000s infinite linear;
}
.slider div#second{
background: url('img2.jpg') no-repeat center;
background-size: cover;
animation: fade2 30000ms infinite linear;
-webkit-animation: fade2 30000ms infinite linear;
}
.slide{z-index:-1;}
#i1:checked ~ #first,
#i2:checked ~ #second
{z-index: 10; animation: click 1s ease-in-out;}<body>
<div class="slider">
<input type="radio" id="i1" name="images" checked />
<input type="radio" id="i2" name="images" />
<div class="slide" id="first">
<h1>WEBAGENCY: L'AGANCE DE TOUS <br> VOS PROJETS !</h1>
<p>Vous avez un projet ? La WebAgency vous aide à les realiser !</p>
<label class="previous" for="i2"><i class="fas fa-chevron-left"></i></label>
<label class="next" for="i2"><i class="fas fa-chevron-right"></i></label>
</div>
<div class="slide" id="second">
<label class="previous" for="i1"><i class="fas fa-chevron-left"></i></label>
<label class="next" for="i1"><i class="fas fa-chevron-right"></i></label> </div>
</div>
</body>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-30 07:15:14
不幸的是，我不确定是否可以组合：
sides
- Auto-advance
上的底部
- 工作按钮中的
- 进度
只需使用CSS/HTML。您需要将您的状态存储为单选按钮，但是如果您使用线性动画前进，如果用户想要返回，会发生什么？如何同步状态？
你可以同时拥有进度和工作按钮。我已经根据你的代码做了一个例子，说明如何实现这一点，并能够添加2+幻灯片。
.radio {
display: none;
}
.slider {
width: 100%;
height: 175px;
position: absolute;
left: 0;
top: 0;
}
.slider__slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
transition: 1s opacity;
}
.slider__slide:nth-of-type(1) {
background: IndianRed;
}
.slider__slide:nth-of-type(2) {
background: Cornsilk;
}
.slider__slide:nth-of-type(3) {
background: PaleTurquoise;
}
.button {
width: 35px;
height: 70px;
position: absolute;
top: 40%;
background-color: rgba(70, 70, 70, 0.6);
}
.button--previous {
left: 0;
border-radius: 0px 50px 50px 0px;
}
.button--next {
right: 0;
border-radius: 50px 0px 0px 50px;
}
.button:hover {
transition: 0.3s;
background-color: rgba(99, 99, 99, 1);
}
.radio:nth-of-type(1):checked ~ .slider__slide:nth-of-type(1),
.radio:nth-of-type(2):checked ~ .slider__slide:nth-of-type(2),
.radio:nth-of-type(3):checked ~ .slider__slide:nth-of-type(3){
opacity: 1;
pointer-events: auto;
}
.progress {
margin: 0;
padding: 0;
position: absolute;
top: 175px;
left: 0;
right: 0;
text-align: center;
list-style-type: none;
}
.progress__item {
position: relative;
display: inline-block;
margin: 1px;
border: 3px solid black;
width: 16px;
height: 16px;
}
.radio:nth-of-type(1):checked ~ .progress .progress__item:nth-of-type(1):before,
.radio:nth-of-type(2):checked ~ .progress .progress__item:nth-of-type(2):before,
.radio:nth-of-type(3):checked ~ .progress .progress__item:nth-of-type(3):before{
position: absolute;
top: 2px;
right: 2px;
bottom: 2px;
left: 2px;
content: '';
background: black;
}
.fas.fa-chevron-left {
position: absolute;
left: 0;
top: 30%;
margin-left: 5px;
color: #fff;
font-size: 30px;
}
.fas.fa-chevron-right {
position: absolute;
right: 0;
top: 30%;
margin-right: 5px;
color: white;
font-size: 30px;
}<body>
<div class="slider">
<input id="i1" class="radio" name="images" type="radio" checked />
<input id="i2" class="radio" name="images" type="radio" />
<input id="i3" class="radio" name="images" type="radio" />
<div class="slider__slide">
<h1>FIRST SLIDE</h1>
<p>First Subtitle</p>
<label class="button button--previous" for="i3"><i class="fas fa-chevron-left"></i></label>
<label class="button button--next" for="i2"><i class="fas fa-chevron-right"></i></label>
</div>
<div class="slider__slide">
<h1>SECOND SLIDE</h1>
<p>Second Subtitle</p>
<label class="button button--previous" for="i1"><i class="fas fa-chevron-left"></i></label>
<label class="button button--next" for="i3"><i class="fas fa-chevron-right"></i></label>
</div>
<div class="slider__slide">
<h1>THIRD SLIDE</h1>
<p>Third Subtitle</p>
<label class="button button--previous" for="i2"><i class="fas fa-chevron-left"></i></label>
<label class="button button--next" for="i1"><i class="fas fa-chevron-right"></i></label>
</div>
<div class="progress">
<label class="progress__item" for="i1"></label>
<label class="progress__item" for="i2"></label>
<label class="progress__item" for="i3"></label>
</div>
</div>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50592397
复制相关文章
相似问题