CSS从角落动画中透露出来 [英] CSS reveal from corner animation
本文介绍了CSS从角落动画中透露出来的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试实现如下动画效果：
当显示横幅时，下一个横幅的右下角应该是可见的。当你点击这个角落时，它应该隐藏当前横幅并显示下一个横幅。
我当前的标记如下：
< div class =banners>
< div class =image activestyle =background-color：red;>
< div class =corner>< / div>
< / div>
< div class =imagestyle =background-color：blue;>
< div class =corner>< / div>
< / div>
< / div>
CSS如下：注意我使用了 clip-path 创建角落：
.banners {
width：800px;
身高：600px;
}
.image {
宽度：100％;
身高：100％;
仓位：绝对;
左：0;
top：0;
}
.image.active {
z-index：1;
clip-path：polygon（100％0,100％65％，60％100％，0 100％，0 0）;
}
.corner {
宽度：50％;
身高：50％;
仓位：绝对;
右：0;
底部：0;
}
JS：
$（document）.ready（function（）{
$（'。corner'）。click（function（）{
$（'。image.active '）。removeClass（'active'）;
$（this）.parent（）。addClass（'active'）;
}）;
}）;
这是以上所有代码的JSFiddle： https://jsfiddle.net/cqqxjjgu/
这是一个直接的问题因为我在删除活动类时，使用 z-index 指定当前活动横幅应具有优先权它只是立即显示下一个横幅，所以理想情况下只应在动画完成后更改 z-index 。
<有没有人知道如何实现这一目标？理想情况下，我需要一个跨浏览器解决方案（不要太过关于IE< 10）。
解决方案
一个简单的例子来实现这个效果没有javascript：
https://jsfiddle.net/freer4/j2159b1e/2/
html，body {height：100％;宽度：100％;余量：0; padding：0;}。banners {position：relative;背景：＃000;宽度：100％;身高：100％; overflow：hidden;}。banners输入{display：none;} .slide1 {background-image：url（https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5T6nwVYWsbzLcLF-JNxnGXFFFwkZMBcCMbaqeTevuldkxHg0N);} .slide2 { background-image：url（http://www.rd.com/wp-content/uploads/sites/2/2016/02/06-train-cat-shake-hands.jpg）;} .slide3 {background-image ：url（https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTKr6YlGNsqgJzvgBBkq1648_HsuDizVn_ZXC6iQp9kjXFzLvs1BA);} .image {display：block;高度：100％;宽度：100％;位置：绝对;溢出：隐藏;的z-index：1;文本对齐：中心; background-position：0 0;背景尺寸：盖;过渡：z-index 1s step-end; clip-path：polygon（100％0,100％100％，100％100％，0 100％，0 0）;动画持续时间：2s; animation-name：clipout;} input：checked + .image {z-index：3;过渡：z-index 1s step-end; clip-path：polygon（100％0,100％50％，50％100％，0 100％，0 0）;动画持续时间：2.2s;动画名称：clipin; cursor：default;}。image：nth-child（2），input：checked + * + * + .image {z-index：2; cursor：pointer;} .content {color：#FFF;显示：内联块;垂直对齐：中部; FONT-FAMILY：宋体;文本转换：大写;字体大小：24像素;不透明度：0; transition：0s opacity 1s;} input：checked + .image .content {opacity：1;过渡：0.8s不透明度0.8s;}。扳手{vertical-align：middle;宽度：0;高度：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）; }
< div class =banners> < input type =radioid =slide1name =slideschecked =checked/> < label class =image slide1for =slide1> < div class =content>幻灯片1< / div> < div class =spanner>< / div> < /标签> < input type =radioid =slide2name =slides/> < label class =image slide2for =slide2> < div class =content>幻灯片2< / div> < div class =spanner>< / div> < /标签> < input type =radioid =slide3name =slides/> < label class =image slide3for =slide3> < div class =content>幻灯片3< / div> < div class =spanner>< / div> < / label>< / div>
基本上，只是使用关键帧为剪辑路径设置动画。喜欢z-index和一些兄弟选择器。
I am trying to achieve an animation effect as follows:
When a banner is shown, the bottom right corner of the next banner should be visible. When you click on this corner, it should hide the current banner and reveal the next one.
My current markup is as follows:
<div class="banners">
<div class="image active" style="background-color: red;">
<div class="corner"></div>
</div>
<div class="image" style="background-color: blue;">
<div class="corner"></div>
</div>
</div>
CSS as follows: Notice I used clip-path to create the corner:
.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');
});
});
Here is a JSFiddle of all the above code: https://jsfiddle.net/cqqxjjgu/
One immediate issue with this is that because I'm using z-index to specify that the current 'active' banner should have precedence, when remove the active class it just displays the next banner immediately, so ideally the z-index should only be changed once the animation has completed.
Does anyone have anyt idea how I can achieive this? Ideally I need a cross browser solution (not too fussed about IE < 10).
解决方案
A simple example accomplishing this effect with no 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://www.rd.com/wp-content/uploads/sites/2/2016/02/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); }
}
<div class="banners">
<input type="radio" id="slide1" name="slides" checked="checked" />
<label class="image slide1" for="slide1">
<div class="content">
Slide 1
</div>
<div class="spanner"></div>
</label>
<input type="radio" id="slide2" name="slides" />
<label class="image slide2" for="slide2">
<div class="content">
Slide 2
</div>
<div class="spanner"></div>
</label>
<input type="radio" id="slide3" name="slides" />
<label class="image slide3" for="slide3">
<div class="content">
Slide 3
</div>
<div class="spanner"></div>
</label>
</div>
Basically, just use keyframes to animate the clip path. Get fancy with the z-indexes and some sibling selectors.
这篇关于CSS从角落动画中透露出来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
