CSS从角落动画中透露出来

我试图实现如下动画效果：

显示横幅时，应显示下一横幅的右下角。 单击此角时，应隐藏当前横幅并显示下一个横幅。

我目前的加价如下：

CSS如下：注意我使用clip-path创建了一个角：

 .banners { width: 800px; height: 600px; } .image { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .image.active { z-index: 1; clip-path: polygon(100% 0, 100% 65%, 60% 100%, 0 100%, 0 0); } .corner { width: 50%; height: 50%; position: absolute; right: 0; bottom: 0; } 

JS：

 $(document).ready(function () { $('.corner').click(function() { $('.image.active').removeClass('active'); $(this).parent().addClass('active'); }); }); 

这是上面所有代码的JSFiddle： https ：//jsfiddle.net/cqqxjjgu/

一个直接的问题是，因为我使用z-index来指定当前“活动”横幅应该具有优先权，当删除active类时它只是立即显示下一个横幅，所以理想情况下z-index应该只是动画完成后更改。

有谁不知道我怎么能实现这个目标？ 理想情况下，我需要一个跨浏览器解决方案（不要过于关注IE <10）。

Answer 1

一个简单的例子，没有javascript完成这个效果：
https://jsfiddle.net/freer4/j2159b1e/2/

 html, body{ height:100%; width:100%; margin:0; padding:0; } .banners { position:relative; background:#000; width: 100%; height: 100%; overflow:hidden; } .banners input{ display:none; } .slide1{ background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5T6nwVYWsbzLcLF-JNxnGXFFFwkZMBcCMbaqeTevuldkxHg0N); } .slide2{ background-image:url(http://sofzh.miximages.com/javascript/06-train-cat-shake-hands.jpg); } .slide3{ background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTKr6YlGNsqgJzvgBBkq1648_HsuDizVn_ZXC6iQp9kjXFzLvs1BA); } .image { display:block; height:100%; width:100%; position: absolute; overflow:hidden; z-index:1; text-align:center; background-position:0 0; background-size:cover; transition:z-index 1s step-end; clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); animation-duration: 2s; animation-name: clipout; } input:checked + .image{ z-index:3; transition:z-index 1s step-end; clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0); animation-duration: 2.2s; animation-name: clipin; cursor:default; } .image:nth-child(2), input:checked + * + * + .image{ z-index:2; cursor:pointer; } .content{ color:#FFF; display:inline-block; vertical-align:middle; font-family:arial; text-transform:uppercase; font-size:24px; opacity:0; transition:0s opacity 1s; } input:checked + .image .content{ opacity:1; transition:0.8s opacity 0.8s; } .spanner{ vertical-align:middle; width:0; height:100%; display:inline-block; } @keyframes clipout { from { clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0); } 50% { clip-path: polygon(100% 0, 100% -100%, -100% 100%, 0 100%, 0 0); } 51% { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); } to { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); } } @keyframes clipin{ from { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); } 50% { clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); } to { clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 100%, 0 0); } } 

 
   
 Slide 1 
 
    
 Slide 2 
 
    
 Slide 3 
 
   

Answer 2

这适用于任何具有转换支持的浏览器： https ： //jsfiddle.net/freer4/cqqxjjgu/1/

基本上，制作一个非常大的封面幻灯片，与下一张幻灯片具有相同的背景颜色，并将其拉到当前幻灯片上。 然后淡出以显示下一张幻灯片。

所以对html进行一点调整：

 
 
 
 Slide 1 
 
 
 
 
 
 Slide 2 
 
 
 
 
 
 Slide 3 
 
 
 
  

更改jQuery以选择下一张幻灯片或第一张幻灯片，如果没有更多：

 $(document).ready(function () { $('.corner').click(function() { var $parent = $(this).parent(); $parent.removeClass("active"); if ($parent.next().length){ $parent.next().addClass("active"); } else { $parent.prevAll().last().addClass("active"); } }); }); 

并设置一些复杂的过渡，你可以调整时间：

 .image { width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow:hidden; z-index:1; transition:z-index 2s step-end, 1s opacity 1s ease-in-out; text-align:center; opacity:0; } .image.active{ opacity:1; z-index:2; transition:z-index 2s step-end, 0s opacity 0s; } .corner { width: 200%; height: 200%; position: absolute; top: -100%; left: -100%; clip-path: polygon(100% 0, 0 70%, 0 100%, 100% 100%, 100% 0, 100% 0); z-index:3; margin-left:150%; margin-top:150%; transition:2s top ease-in-out, 2s left ease-in-out, 0s margin 2s; } .image.active .corner{ top:0; left:0; margin-top:0; margin-left:0; transition:0s top ease-in-out 1s, 0s left ease-in-out 1s, 2s margin ease-in-out 1s; } 

---

旁白：这个例子是完全灵活的（不关心大小）：

 .banners { width: 100%; height: 100%; } 

或者使用图片： https ： //jsfiddle.net/freer4/ens7caaL/

Answer 3

这是一个没有使用clip-path的答案，因为除了svg之外的DOM元素的浏览器兼容性很低。

我现在看到Vadim与旋转容器有着相同的想法（直到我完成后才回到这里），但从我可以看出，我们的答案之间仍有足够的差异来certificate我的解决方案是合理的：

 $(document).ready(function() { $(".slider").on("click",".next",function() { if ($(this).prev().length) {$(this).prev().removeClass("curr");} else {$(this).siblings().last().removeClass("curr");} //deactivate current slide if ($(this).next().length) {$(this).next().addClass("next");} else {$(this).siblings().first().addClass("next");} //prepare slide that follows next slide $(this).removeClass("next").addClass("curr"); //activate next slide }); }); 

 .slider, .slider .img { width: 55vw; height: calc(55vw / 16*9); background: #000 center/contain no-repeat; } .slider {position:relative; margin:0 auto; overflow:hidden;} .slider .slide { position: absolute; z-index: 0; width: 250%; height: 0; transform: translateX(-50%) rotate(-20deg); transform-origin: 50% 0; transition:z-index 0s 0.7s, height 0.7s; overflow: hidden; } .slider .slide.next {z-index:1; height:155%; opacity:0.5; transition:z-index 0s 1.1s, height 0s 0.7s; cursor:pointer;} .slider .slide.curr {z-index:2; height:135%; opacity:1.0; transition:z-index 0s 1.1s, height 0.4s 0.7s, opacity 0.7s;} .slider .slide .img {margin-left:50%; transform:rotate(20deg); transform-origin:0 0;} 

Answer 4

即使在IE / Edge中，这也适用于所有地方。 它基于CSS transition并通过JavaScript替换CSS类。

我正在使用旋转矩形来裁剪图像。 演示主要原理（包含大量硬编码，先前计算的值）：

 *, *:before, *:after { box-sizing: border-box; } body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; } div { width: 300px; height: 200px; border: 1px solid red; position: relative; } div:after { content: ""; position: absolute; left: -86.6px; top: 50px; width: 359.8px; height: 240px; transform-origin: 0 0; transform: rotate(-30deg); border: 1px solid blue; } 

Answer 5

此示例适用于Firefox，Chrome，IE。

用于更改滑动规则更改transition

 $(document).ready(function () { $('.angle').click(function() { var $parent = $(this).parent(); $parent.removeClass("current"); if ($parent.next().length){ $parent.next().addClass("current"); } else { $parent.prevAll().last().addClass("current"); } }); }); 

 body{ height:100%; width:100%; } .slideShow { width: 100%; height: 100%; } .image { width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow:hidden; z-index:1; transition:z-index 2s step-end, 1s opacity 1s ease-in-out; text-align:center; opacity:0; background-size:100% 100%; background-attachment:fixed; } .image.current{ opacity:1; z-index:2; transition:z-index 2s step-end, 0s opacity 0s; } .angle { width: 200%; height: 200%; position: absolute; top: -100%; left: -100%; clip-path: polygon(100% 0, 0 70%, 0 100%, 100% 100%, 100% 0, 100% 0); z-index:3; margin-left:150%; margin-top:150%; transition:2s top ease-in-out, 2s left ease-in-out, 0s margin 2s; background-size:100% 100%; background-attachment:fixed; } .image.current .angle{ top:0; left:0; margin-top:0; margin-left:0; transition:0s top ease-in-out 1s, 0s left ease-in-out 1s, 2s margin ease-in-out 1s; } .main{ color:#FFF; display:inline-block; vertical-align:middle; font-family:arial; text-transform:uppercase; font-size:24px; } .middle{ vertical-align:middle; width:0; height:100%; display:inline-block; } .image1, .image3 .angle{ background-image: url(http://sofzh.miximages.com/javascript/4c5o0m8m6o5n4e0.png); } .image1 .angle, .image2{ background-image:url(http://sofzh.miximages.com/javascript/1c7obm6m1o3nbb0.png); } .image2 .angle, .image3{ background-image:url(http://sofzh.miximages.com/javascript/ccbo5m2m8o8n759.jpg); }