gpt4 book ai didi

html - 基于 css html 的 slider /悬停时显示下一张幻灯片的一部分

转载 作者:行者123 更新时间:2023-11-28 05:01:35 29 4
gpt4 key购买 nike

现在已经尝试了更长的时间来调整下面 slider 的效果。我试图创建的效果是,当您将鼠标悬停在右侧或左侧时,它会显示下一张或上一张幻灯片的一些内容。

示例:当事件幻灯片是幻灯片 1 并且您将鼠标悬停在左侧(比如总幻灯片的 10%)时,它应该显示上一张幻灯片的一部分,而当鼠标悬停在幻灯片 1 的右侧时(同样是 10%)它应该显示下一张幻灯片的一些内容。

我不完全确定这种效果在 CSS/HTML 中是否可行,但它可能适用于悬停状态。但如果可能的话,你们中的一个人可能应该知道 :)

/* Slider wrapper*/
.css-slider-wrapper {
display: block;
background: #FFF;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/* Slider */
.slider {
width: 100%;
height: 100%;
background: red;
position: absolute;
left: 0;
top: 0;
opacity: 1;
z-index: 0;

display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-direction: row;
flex-wrap: wrap;
-webkit-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
align-content: center;

-webkit-transition: -webkit-transform 1600ms;
transition: -webkit-transform 1600ms, transform 1600ms;
-webkit-transform: scale(1);
transform: scale(1);
}
/* each slide background color */
.slide1 {
background: #00bcd7;
left: 0;
}
.slide2 {
background: #009788;
left: 100%
}
.slide3 {
background: #ff5608;
left: 200%
}
.slide4 {
background: #607d8d;
left: 300%;
}
.slider > div {
text-align: center;
}
/* Slider inner content */
.slider h2 {
color: #FFF;
font-weight: 900;
text-transform: uppercase;
font-size: 45px;
line-height: 120%;
opacity: 0;
-webkit-transform: translateX(500px);
transform: translateX(500px);
}
.slider .button {
color: #FFF;
padding: 5px 50px;
background: rgba(255,255,255,0.3);
text-decoration: none;
opacity: 0;
font-size: 15px;
line-height: 30px;
display: inline-block;
-webkit-transform: translateX(-500px);
transform: translateX(-500px);
}
.slider h2, .slider .button {
-webkit-transition: opacity 800ms, -webkit-transform 800ms;
transition: transform 800ms, opacity 800ms;
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
}
/* Next and previous button */
.control {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
z-index: 55;
}
.control label {
z-index: 0;
display: none;
text-align: center;
line-height: 50px;
font-size: 50px;
color: #FFF;
cursor: pointer;
opacity: 0.2;
}
.control label:hover {
opacity: 0.5;
}
.next {
right: 1%;
}
.previous {
left: 1%;
}

/* Slider pagination */
.slider-pagination {
position: absolute;
bottom: 20px;
width: 100%;
left: 0;
text-align: center;
z-index: 1000;
}
.slider-pagination label {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
background: rgba(255,255,255,0.2);
margin: 0 2px;
border: solid 1px rgba(255,255,255,0.4);
cursor: pointer;
}

/* Slider control active css */
.slide-radio1:checked ~ .next .numb2,
.slide-radio2:checked ~ .next .numb3,
.slide-radio3:checked ~ .next .numb4,
.slide-radio2:checked ~ .previous .numb1,
.slide-radio3:checked ~ .previous .numb2,
.slide-radio4:checked ~ .previous .numb3 {
display: block;
z-index: 1
}
/* Slider pagination active css */
.slide-radio1:checked ~ .slider-pagination .page1,
.slide-radio2:checked ~ .slider-pagination .page2,
.slide-radio3:checked ~ .slider-pagination .page3,
.slide-radio4:checked ~ .slider-pagination .page4 {
background: rgba(255,255,255,1)
}

/* css for sliding effect when you click on control button*/
.slide-radio1:checked ~ .slider {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.slide-radio2:checked ~ .slider {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-radio3:checked ~ .slider {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
.slide-radio4:checked ~ .slider {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}

.slide-radio1:checked ~ .slide1 h2,
.slide-radio2:checked ~ .slide2 h2,
.slide-radio3:checked ~ .slide3 h2,
.slide-radio4:checked ~ .slide4 h2,
.slide-radio1:checked ~ .slide1 .button,
.slide-radio2:checked ~ .slide2 .button,
.slide-radio3:checked ~ .slide3 .button,
.slide-radio4:checked ~ .slide4 .button {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1
}

@media only screen and (max-width: 767px) {
.slider h2 {
font-size: 20px;
}
.slider > div {
padding: 0 2%
}
.control label {
font-size: 35px;
}
.slider .button {
padding: 0 30px;
}
<div class="css-slider-wrapper">

<input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
<input type="radio" name="slider" class="slide-radio2" id="slider_2">
<input type="radio" name="slider" class="slide-radio3" id="slider_3">
<input type="radio" name="slider" class="slide-radio4" id="slider_4">


<div class="slider-pagination">

<label for="slider_1" class="page1"></label>
<label for="slider_2" class="page2"></label>
<label for="slider_3" class="page3"></label>
<label for="slider_4" class="page4"></label>
</div>

<div class="next control">
<label for="slider_1" class="numb1"><i class="fa fa-arrow-circle-right"></i></label>
<label for="slider_2" class="numb2"><i class="fa fa-arrow-circle-right"></i></label>
<label for="slider_3" class="numb3"><i class="fa fa-arrow-circle-right"></i></label>
<label for="slider_4" class="numb4"><i class="fa fa-arrow-circle-right"></i></label>
</div>
<div class="previous control">
<label for="slider_1" class="numb1"><i class="fa fa-arrow-circle-left"></i></label>
<label for="slider_2" class="numb2"><i class="fa fa-arrow-circle-left"></i></label>
<label for="slider_3" class="numb3"><i class="fa fa-arrow-circle-left"></i></label>
<label for="slider_4" class="numb4"><i class="fa fa-arrow-circle-left"></i></label>
</div>


<div class="slider slide1">
<div>
<img src="http://fillmurray.com/801/450"></img>
</div>
</div>
<div class="slider slide2">
<div>
<img src="http://fillmurray.com/801/450"></img>
</div>
</div>
<div class="slider slide3">
<div>
<img src="http://fillmurray.com/801/450"></img>
</div>
</div>
<div class="slider slide4">
<div>
<img src="http://fillmurray.com/801/450"></img>
</div>
</div>
</div>

最佳答案

你快到了。仅缺少一些转换:

 .slide-radio1:checked ~ .control.previous {
display: none;
}
.slide-radio1:checked ~ .control.next:hover ~.slider {
-webkit-transform: translateX(-10%);
transform: translateX(-10%);
}

.slide-radio2:checked ~ .control.next:hover ~.slider {
-webkit-transform: translateX(-110%);
transform: translateX(-110%);
}
.slide-radio2:checked ~ .control.previous:hover ~.slider {
-webkit-transform: translateX(-90%);
transform: translateX(-90%);
}
.slide-radio3:checked ~ .control.next:hover ~.slider {
-webkit-transform: translateX(-210%);
transform: translateX(-210%);
}
.slide-radio3:checked ~ .control.previous:hover ~.slider {
-webkit-transform: translateX(-190%);
transform: translateX(-190%);
}
.slide-radio4:checked ~ .control.next {
display: none;
}
.slide-radio4:checked ~ .control.previous:hover ~.slider {
-webkit-transform: translateX(-290%);
transform: translateX(-290%);
}


.slide-radio1:checked ~ .control .numb1 {
display: inline-block;
}
.slide-radio2:checked ~ .control .numb2 {
display: inline-block;
}
.slide-radio3:checked ~ .control .numb3 {
display: inline-block;
}
.slide-radio4:checked ~ .control .numb4 {
display: inline-block;
}

我还必须更改带有 PN 字符的图标。我没有那些图标字体。

/* Slider wrapper*/
.css-slider-wrapper {
background: #FFF;
}
/* Slider */
.slider {
width: 100%;
height: 100%;
background: red;
position: absolute;
left: 0;
top: 0;
z-index: 0;

-webkit-transition: -webkit-transform 1600ms;
transition: -webkit-transform 1600ms, transform 1600ms;
-webkit-transform: scale(1);
transform: scale(1);
}
/* each slide background color */
.slide1 {
background: #00bcd7;
left: 0;
}
.slide2 {
background: #009788;
left: 100%
}
.slide3 {
background: #ff5608;
left: 200%
}
.slide4 {
background: #607d8d;
left: 300%;
}
/* Slider inner content */
.slider h2 {
color: #FFF;
font-weight: 900;
text-transform: uppercase;
font-size: 45px;
line-height: 120%;
opacity: 0;
-webkit-transform: translateX(500px);
transform: translateX(500px);
}
.slider img {
height: 100%;
width: 100%;
object-fit: cover;
}
.slider .button {
color: #FFF;
padding: 5px 50px;
background: rgba(255,255,255,0.3);
text-decoration: none;
opacity: 0;
font-size: 15px;
line-height: 30px;
display: inline-block;
-webkit-transform: translateX(-500px);
transform: translateX(-500px);
}
.slider h2, .slider .button {
-webkit-transition: opacity 800ms, -webkit-transform 800ms;
transition: transform 800ms, opacity 800ms;
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
}
/* Next and previous button */
.control {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
z-index: 55;
}
.control label {
z-index: 0;
text-align: center;
line-height: 50px;
font-size: 50px;
color: #FFF;
cursor: pointer;
opacity: 0.2;
display: none;
}
.control:hover label {
opacity: 0.5;
}
.next {
right: 1%;
}
.previous {
left: 1%;
}

/* Slider pagination */
.slider-pagination {
position: absolute;
bottom: 20px;
width: 100%;
left: 0;
text-align: center;
z-index: 1000;
}
.slider-pagination label {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
background: rgba(255,255,255,0.2);
margin: 0 2px;
border: solid 1px rgba(255,255,255,0.4);
cursor: pointer;
}


/* Slider pagination active css */
.slide-radio1:checked ~ .slider-pagination .page1,
.slide-radio2:checked ~ .slider-pagination .page2,
.slide-radio3:checked ~ .slider-pagination .page3,
.slide-radio4:checked ~ .slider-pagination .page4 {
background: rgba(255,255,255,1)
}

/* css for sliding effect when you click on control button*/
.slide-radio1:checked ~ .slider {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.slide-radio2:checked ~ .slider {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-radio3:checked ~ .slider {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
.slide-radio4:checked ~ .slider {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}

.slide-radio1:checked ~ .slide1 h2,
.slide-radio2:checked ~ .slide2 h2,
.slide-radio3:checked ~ .slide3 h2,
.slide-radio4:checked ~ .slide4 h2,
.slide-radio1:checked ~ .slide1 .button,
.slide-radio2:checked ~ .slide2 .button,
.slide-radio3:checked ~ .slide3 .button,
.slide-radio4:checked ~ .slide4 .button {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1
}

.slide-radio1:checked ~ .control.previous {
display: none;
}
.slide-radio1:checked ~ .control.next:hover ~.slider {
-webkit-transform: translateX(-10%);
transform: translateX(-10%);
}

.slide-radio2:checked ~ .control.next:hover ~.slider {
-webkit-transform: translateX(-110%);
transform: translateX(-110%);
}
.slide-radio2:checked ~ .control.previous:hover ~.slider {
-webkit-transform: translateX(-90%);
transform: translateX(-90%);
}
.slide-radio3:checked ~ .control.next:hover ~.slider {
-webkit-transform: translateX(-210%);
transform: translateX(-210%);
}
.slide-radio3:checked ~ .control.previous:hover ~.slider {
-webkit-transform: translateX(-190%);
transform: translateX(-190%);
}
.slide-radio4:checked ~ .control.next {
display: none;
}
.slide-radio4:checked ~ .control.previous:hover ~.slider {
-webkit-transform: translateX(-290%);
transform: translateX(-290%);
}


.slide-radio1:checked ~ .control .numb1 {
display: inline-block;
}
.slide-radio2:checked ~ .control .numb2 {
display: inline-block;
}
.slide-radio3:checked ~ .control .numb3 {
display: inline-block;
}
.slide-radio4:checked ~ .control .numb4 {
display: inline-block;
}
<div class="css-slider-wrapper">

<input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
<input type="radio" name="slider" class="slide-radio2" id="slider_2">
<input type="radio" name="slider" class="slide-radio3" id="slider_3">
<input type="radio" name="slider" class="slide-radio4" id="slider_4">


<div class="slider-pagination">
<label for="slider_1" class="page1"></label>
<label for="slider_2" class="page2"></label>
<label for="slider_3" class="page3"></label>
<label for="slider_4" class="page4"></label>
</div>


<div class="control previous">
<label for="slider_1" class="numb2"> P </label>
<label for="slider_2" class="numb3"> P </label>
<label for="slider_3" class="numb4"> P </label>
</div>
<div class="control next">
<label for="slider_2" class="numb1"> N </label>
<label for="slider_3" class="numb2"> N </label>
<label for="slider_4" class="numb3"> N </label>
</div>

<div class="slider slide1">
<img src="http://fillmurray.com/801/450" />
</div>
<div class="slider slide2">
<img src="http://fillmurray.com/800/450" />
</div>
<div class="slider slide3">
<img src="http://fillmurray.com/799/450" />
</div>
<div class="slider slide4">
<img src="http://fillmurray.com/798/450" />
</div>
</div>

关于html - 基于 css html 的 slider /悬停时显示下一张幻灯片的一部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40075241/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com