>  기사  >  웹 프론트엔드  >  CSS3实例: 实现 swap 动画_html/css_WEB-ITnose

CSS3实例: 实现 swap 动画_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 11:29:341532검색

CSS3动画的出现,让我的真的非常喜欢,因为他够简单.今天我们来实现一个交换动画,一个笑脸慢慢从远处,回到自己的原来位置的一种效果.这种动画在JS里面也是很多见的.

首先得将HTML结构设计好,一个固定的窗口,然后一个带有黑色背景的笑脸

代码名称

<div><span>☺</span></div>

笑脸居中我们用最新的布局flex来实现,这个也是很好用的属性.之前文章中已经有flex的相关教程,大家不懂的可以看看.

代码名称

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;

}

然后加入动画,动画是位置的变化,和元素缩放状态的变化,再加入了透明度的变化.

代码名称

@keyframes anims {

0% {

right: 0px;

top: 0;

transform: scale(0);

opacity: 0.2;

}

50%{

top: 0;

right: -300px;

transform: scale(0.5);

opacity: 0.6;

}

90%{

top: 0;

right: -10px;

transform: scale(0.99);

opacity: 0.9;

}

100%{

top: 0;

right:0px;

transform: scale(1);

opacity: 1;

}

}

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

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

本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=185 ,欢迎大家传播与分享.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.