html:
css:
.slide{
width: 200px;
height: 80px;
position: relative;
margin: 0 auto;
overflow: hidden;
background-color: #f00;
}
.slide-content{
width: 100%;
height: 100%;
position: absolute;
right: -100%;
top: 0;
animation: slider-out 0.5s linear;
}
.slide-content:target{
right: 0%;
animation: slider-in 0.5s linear;
}
@keyframes slider-out{
from{
right: 0%;
}
to{
right: -100%;
}
}
@keyframes slider-in{
from{
right: 100%;
}
to{
right: 0%;
}
}
#slide1{
background-color: #f00;
}
#slide2{
background-color: #0f0;
}
#slide3{
background-color: #00f;
}
.btns{
position: absolute;
left: 0;
bottom: 0;
z-index: 100;
}
.btn{
float: left;
margin-left: 10px;
display: block;
text-align: center;
text-decoration: none;
width: 20px;
line-height: 20px;
opacity: 0.6;
color: #fff;
background-color: #b7b7b7;
}
想达到的效果是点击按钮后,对应的slide块由左往右滑动出现。
调试发现:
单击按钮后,所点按钮对应的slide块的显示效果没有按预期地变化,但其right属性和预期是一样的,与显示效果不符?
按钮部分会很奇怪地跑到右边去,我的理解是按钮明明是position:absolute的,应该基于父元素div.slide定位,为什么会和它兄弟元素一起移动所以理解不能~
将 slide-content元素的属性改为 right:100%后,完美运行,为什么?测试了一下animation配合@keyframes的动画,即使0%时的属性与元素本身属性不符,动画也会正常按流程运行,只是有个突变的效果,为什么此处行不通?
请各位指教!谢谢~!