纯CSS旋转木马-更改幻灯片时的滑动动画问题
我创建了纯CSS的Carousal。我使用javascript只是为了自动更改幻灯片,而不是一切都是CSS。我试图通过CSS“transition”属性更改每张幻灯片时获得滑动动画效果,但它不会在整个幻灯片容器中滑动。 HTML: CSS: 以下是js fiddle的工作示例:纯CSS旋转木马-更改幻灯片时的滑动动画问题,css,carousel,css-animations,Css,Carousel,Css Animations,我创建了纯CSS的Carousal。我使用javascript只是为了自动更改幻灯片,而不是一切都是CSS。我试图通过CSS“transition”属性更改每张幻灯片时获得滑动动画效果,但它不会在整个幻灯片容器中滑动。 HTML: CSS: 以下是js fiddle的工作示例: 让我们知道你们中是否有人有用于滑动动画的CSS解决方案。感谢您的帮助。好主意,顺便说一句,在CSS中为GPU制作沉重/连续的动画总是很好的 CSS中的小问题:-) 您仅在控件上使用了transform属性,这是多余的 您
让我们知道你们中是否有人有用于滑动动画的CSS解决方案。感谢您的帮助。好主意,顺便说一句,在CSS中为GPU制作沉重/连续的动画总是很好的 CSS中的小问题:-) 您仅在控件上使用了transform属性,这是多余的 您需要: 1) 将过渡添加到所有,而不仅仅是项目的不透明度。 2) 将选中项目的平移设置为0,将未选中项目的平移设置为100%平移x轴(可以设置为负值以切换方向) 这是我从你那里得到的JSFIDLE: 以下是更新后的代码和代码片段:
var n=0;
window.ev=假;
document.getElementById(“旋转木马内部”).onMouseCenter=function(){
window.ev=真;
};
document.getElementById(“内部旋转木马”).onmouseleave=函数(){
window.ev=假;
设置超时(自动滑动,400);
};
函数autoSlide(){
如果(window.ev==false){
n++;
如果(n==4)
n=1;
document.getElementById(“旋转木马-”+n).checked=true;
设置超时(自动滑动,4000);
}
}
自动滑动()代码>
.carousel{
位置:相对位置;
盒影:0 1px 6px rgba(0,0,0,0.64);
宽度:100%;
}
.旋转木马内部{
位置:相对位置;
溢出:隐藏;
宽度:100%;
}
.旋转木马打开:选中+.旋转木马项目{
位置:静态;
不透明度:100;
}
.传送带项目{
位置:绝对位置;
不透明度:0;
-webkit转换:所有1都可以轻松完成;
过渡:所有1都放松;
显示:块;
最小高度:330px;
宽度:计算(100%-100px);
保证金:0自动;
-webkit转换:转换(100%,0px);
光标:指针;
-ms变换:平移(100%,0px);
转换:转换(100%,0px);
}
.旋转木马打开:选中+.旋转木马项目{
-webkit转换:翻译(0px,0px);
光标:指针;
-ms变换:平移(0px,0px);
转换:转换(0px,0px);
}
.传送带控制{
边界半径:50%;
颜色:#aaa;
光标:指针;
显示:无;
字号:80px;
线高:35px;
位置:绝对位置;
最高:50%;
/*-网络工具包转换:翻译(0,-50%);
光标:指针;
-ms变换:翻译(0,-50%);
转换:翻译(0,-50%)*/
文本对齐:居中;
宽度:40px;
z指数:10;
}
.carousel-control.prev{
左:2%;
}
.carousel-control.next{
右:2%;
}
.转盘控制:悬停{
颜色:#000;
}
#转盘-1:已选中。控制-1,
#转盘-2:已选中。控制-2,
#转盘-3:已选中。控制-3{
显示:块;
}
.转盘指示器{
列表样式:无;
保证金:0;
填充:0;
位置:绝对位置;
底部:0;
左:0;
右:0;
文本对齐:居中;
z指数:10;
}
.转盘指示器{
显示:内联块;
}
.旋转木马子弹{
颜色:#7575;
光标:指针;
显示:块;
字体大小:24px;
字体大小:300;
}
#转盘-1:选中~。控制-1~。转盘指示器li:第n个子项(1)。转盘项目符号,
#旋转木马-2:选中~。控制-2~。旋转木马指示器li:第n个子项(2)。旋转木马项目符号,
#旋转木马-3:选中~。对照-3~。旋转木马指示器li:第n个孩子(3)。旋转木马项目符号{
颜色:#009eb1;
}
.传送带项目{
背景:浅蓝色;
填充:20px;
文本对齐:居中;
}
这是我的第一张幻灯片
这是我的第二张幻灯片
这是我的第三张幻灯片
‹
›
‹
›
‹
›
●
●
●
顺便说一句,在CSS中制作沉重/连续的动画以利用GPU总是很好的
CSS中的小问题:-)
您仅在控件上使用了transform属性,这是多余的
您需要:
1) 将过渡添加到所有,而不仅仅是项目的不透明度。
2) 将选中项目的平移设置为0,将未选中项目的平移设置为100%平移x轴(可以设置为负值以切换方向)
这是我从你那里得到的JSFIDLE:
以下是更新后的代码和代码片段:
var n=0;
window.ev=假;
document.getElementById(“旋转木马内部”).onMouseCenter=function(){
window.ev=真;
};
document.getElementById(“内部旋转木马”).onmouseleave=函数(){
window.ev=假;
设置超时(自动滑动,400);
};
函数autoSlide(){
如果(window.ev==false){
n++;
如果(n==4)
n=1;
document.getElementById(“旋转木马-”+n).checked=true;
设置超时(自动滑动,4000);
}
}
自动滑动()代码>
.carousel{
位置:相对位置;
盒影:0 1px 6px rgba(0,0,0,0.64);
宽度:100%;
}
.旋转木马内部{
位置:相对位置;
溢出:隐藏;
宽度:100%;
}
.旋转木马打开:选中+.旋转木马项目{
位置:静态;
不透明度:100;
}
.传送带项目{
位置:绝对位置;
不透明度:0;
-webkit转换:所有1都可以轻松完成;
过渡:所有1都放松;
显示:块;
最小高度:330px;
宽度:计算(100%-100px);
保证金:0自动;
-webkit转换:转换(100%,0px);
光标:指针;
-ms变换:平移(100%,0px);
转换:转换(100%,0px);
}
.旋转木马打开:ch
<div class="carousel">
<div class="carousel-inner" id="carousel-inner">
<input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
<div class="carousel-item">
<h1>This is my first slide</h1>
</div>
<input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item">
<h1>This is my second slide</h1>
</div>
<input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item">
<h1>This is my third slide</h1>
</div>
<label for="carousel-3" class="carousel-control prev control-1">‹</label>
<label for="carousel-2" class="carousel-control next control-1">›</label>
<label for="carousel-1" class="carousel-control prev control-2">‹</label>
<label for="carousel-3" class="carousel-control next control-2">›</label>
<label for="carousel-2" class="carousel-control prev control-3">‹</label>
<label for="carousel-1" class="carousel-control next control-3">›</label>
<ol class="carousel-indicators">
<li>
<label for="carousel-1" class="carousel-bullet">●</label>
</li>
<li>
<label for="carousel-2" class="carousel-bullet">●</label>
</li>
<li>
<label for="carousel-3" class="carousel-bullet">●</label>
</li>
</ol>
</div>
</div>
var n = 0;
window.ev = false;
document.getElementById("carousel-inner").onmouseenter = function () {
window.ev = true;
};
document.getElementById("carousel-inner").onmouseleave = function () {
window.ev = false;
setTimeout(autoSlide, 400);
};
function autoSlide() {
if (window.ev == false) {
n++;
if (n === 4)
n = 1;
document.getElementById("carousel-" + n).checked = true;
setTimeout(autoSlide, 4000);
}
}
autoSlide();
.carousel {
position: relative;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.64);
width: 100%;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel-open:checked + .carousel-item {
position: static;
opacity: 100;
}
.carousel-item {
position: absolute;
opacity: 0;
-webkit-transition: opacity 0.6s ease-out;
transition: opacity 0.6s ease-out;
display: block;
min-height: 330px;
width: calc(100% - 100px);
margin: 0 auto;
}
.carousel-control {
border-radius: 50%;
color: #aaa;
cursor: pointer;
display: none;
font-size: 80px;
line-height: 35px;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
cursor: pointer;
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
text-align: center;
width: 40px;
z-index: 10;
}
.carousel-control.prev {
left: 2%;
}
.carousel-control.next {
right: 2%;
}
.carousel-control:hover {
color: #000;
}
#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
display: block;
}
.carousel-indicators {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
.carousel-indicators li {
display: inline-block;
}
.carousel-bullet {
color: #757575;
cursor: pointer;
display: block;
font-size: 24px;
font-weight: 300;
}
#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
color: #009eb1;
}
.carousel-item {
background: lightblue;
padding: 20px;
text-align: center;
}