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;        }       }   

这样就实现了我们想要的效果,当然自己出现的动态效果,还可以自己来设定.

好了,这就是swap 动画效果。

大家可以实现这个可爱的笑脸动画吗？试试吧！

CSS