我的图像转换有一些问题，只有在单击 1 和 3 按钮时它才能正常工作，但是当单击 2 和 4 按钮时，它们会卡住，您可以看到它被之前的其他图像赶上了. 我需要它来平滑过渡所有图像而不仅仅是 2 并且卡在其他 2
我希望它看起来像这样：http ://tympanus.net/Tutorials/CSS3SlidingImagePanels/index.html
我将我的 css 附加到它上面，但您也可以到这里查看它的实际效果。当然，它进行了一些修改以使其适用于我拥有的内容。但任何帮助都会很棒。谢谢！！
.cr-container {
width: 960px;
height: 600px;
position: relative;
margin: 0 auto;
text-align: center;
}
.cr-container label {
font-style: italic;
width: 240px;
height: 30px;
cursor: pointer;
color: #fff;
line-height: 32px;
font-size: 24px;
float: left;
position: relative;
margin-top: 35px;
z-index: 1000;
}
.cr-container label:before {
content: '';
width: 34px;
height: 34px;
background: #1D3867;
position: absolute;
left: 50%;
margin-left: -17px;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(255,255,255,0.3);
z-index: -1;
}
.cr-container label:after{
width: 1px;
height: 400px;
content: '';
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffffff', endColorstr='#00ffffff',GradientType=0 );
position: absolute;
bottom: -20px;
right: 0px;
}
.cr-container label.cr-label-img-4:after{
width: 0px;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4 {
color: #1D3867;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before {
background: #fff;
box-shadow: 0 0 0 4px #1D3867;
}
.cr-container input {
display: none;
}
.cr-bgimg {
width: 960px;
height: 600px;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.cr-bgimg {
background-repeat: no-repeat;
background-position: 0 0;
}
.cr-bgimg div {
width: 240px;
height: 100%;
position: relative;
float: left;
overflow: hidden;
background-repeat: no-repeat;
}
.cr-bgimg div span {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: -240px;
z-index: 2;
text-indent: -9000px;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1) {
background-image: url(/wp-content/uploads/2013/09/Education-Page-Element-26.png);
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2) {
background-image: url(/wp-content/uploads/2013/09/Education-Page-Element-27.png);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3) {
background-image: url(/wp-content/uploads/2013/09/Education-Page-Element-28.png);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4) {
background-image: url(/wp-content/uploads/2013/09/Education-Page-Element-29.png);
}
.cr-bgimg div:nth-child(1) span {
background-position: 0 0;
}
.cr-bgimg div:nth-child(2) span {
background-position: -240px 0;
}
.cr-bgimg div:nth-child(3) span {
background-position: -480px 0;
}
.cr-bgimg div:nth-child(4) span {
background-position: -720px 0;
}
.cr-container input:checked ~ .cr-bgimg div span {
-webkit-animation: slideOut .6s ease-in-out;
-moz-animation: slideOut .6s ease-in-out;
-o-animation: slideOut .6s ease-in-out;
-ms-animation: slideOut .6s ease-in-out;
animation: slideOut .6s ease-in-out;
}
@-webkit-keyframes slideOut {
0% {
left: 0;
}
100% {
left: 150px;
}
}
@-moz-keyframes slideOut {
0% {
left: 0;
}
100% {
left: 150px;
}
}
@-o-keyframes slideOut {
}
100% {
left: 150px;
}
}
@keyframes slideOut {
0% {
left: 0;
}
100% {
left: 150px;
}
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4) {
-webkit-transition: left .5s ease-in-out;
-moz-transition: left .5s ease-in-out;
-o-transition: left .5s ease-in-out;
-ms-transition: left .5s ease-in-out;
transition: left .5s ease-in-out;
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
-ms-animation: none;
animation: none;
left: 0;
z-index: 10;
}
.cr-titles h3 {
color: #fff;
text-shadow: 1px 1px 6px #333;
}
.cr-titles h3 span {
z-index: 10000;
position: absolute;
width: 94.5%;
left: 0;
text-align: center;
opacity: 0;
top: 50%;
-webkit-transition: opacity .8s ease-in-out;
-moz-transition: opacity .8s ease-in-out;
-o-transition: opacity .8s ease-in-out;
-ms-transition: opacity .8s ease-in-out;
transition: opacity .8s ease-in-out;
}
.cr-titles h3 span:nth-child(1) {
font-family: texgyreadventor, Arial, sans-serif;
font-size: 60px;
display: block;
letter-spacing: 7px;
line-height: 40px;
}
.cr-titles h3 span:nth-child(2) {
margin-top: 69px;
background-image: url(/wp-content/uploads/2013/09/Education-Page-Element-30.png), url(/wp-content/uploads/2013/09/Education-Page-Element-31.png);
height: 53px;
font-size: 20px;
padding: 26px;
font-style: italic;
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}
.cr-container input:checked ~ .cr-titles h3 span:nth-child(1) {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-o-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles div:nth-child(1) span:nth- child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles div:nth-child(2) span:nth-child(1),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles div:nth-child(3) span:nth-child(1),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles div:nth-child(4) span:nth-child(1),
.cr-container input.cr-selector-img-1:checked ~ .cr-titles div:nth-child(1) span:nth-child(2),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles div:nth-child(2) span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles div:nth-child(3) span:nth-child(2),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles div:nth-child(4) span:nth- child(2) {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.collegesFrameDescription {
display: block;
width: 900px;
padding: 10px 30px;
color: #fff;
font-size: .85em;
position: absolute;
height: 125px;
z-index: 9;
bottom: 0;
opacity: 0;
text-align: left;
-moz-column-count: 3;
-webkit-column-count: 3;
-ms-column-count: 3;
column-count: 3;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-ms-column-gap: 20px;
column-gap: 20px;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles div:nth-child(1) .collegesFrameDescription,
.cr-container input.cr-selector-img-2:checked ~ .cr-titles div:nth-child(2) .collegesFrameDescription,
.cr-container input.cr-selector-img-3:checked ~ .cr-titles div:nth-child(3) .collegesFrameDescription,
.cr-container input.cr-selector-img-4:checked ~ .cr-titles div:nth-child(4) .collegesFrameDescription {
opacity: 1;
-webkit-transition: opacity .8s ease-in-out;
-moz-transition: opacity .8s ease-in-out;
-o-transition: opacity .8s ease-in-out;
-ms-transition: opacity .8s ease-in-out;
transition: opacity .8s ease-in-out;
}
}