本篇文章为大家展示了CSS3中怎么实现swap交换动画,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
首先得将HTML结构设计好,一个固定的窗口,然后一个带有黑色背景的笑脸
XML/HTML Code复制内容到剪贴板
<div><span>☺</span></div>
笑脸居中我们用最新的布局flex来实现,这个也是很好用的属性.之前文章中已经有flex的相关教程,大家不懂的可以看看.
CSS Code复制内容到剪贴板
div{
width: 200px;
height: 200px;
color: #fff;
border: #eee 2px solid;
}
div > span{
width: 100%;
height: 100%;
position: relative;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
font-size: 80px;
animation: anims 1s ease-in;
}
然后加入动画,动画是位置的变化,和元素缩放状态的变化,再加入了透明度的变化.
CSS Code复制内容到剪贴板
@keyframes anims {
0% {
rightright: 0px;
top: 0;
transform: scale(0);
opacity: 0.2;
}
50%{
top: 0;
rightright: -300px;
transform: scale(0.5);
opacity: 0.6;
}
90%{
top: 0;
rightright: -10px;
transform: scale(0.99);
opacity: 0.9;
}
100%{
top: 0;
rightright:0px;
transform: scale(1);
opacity: 1;
}
}
上述内容就是CSS3中怎么实现swap交换动画,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注天达云行业资讯频道。