CSS3实现swap交换动画


Posted in HTML / CSS onJanuary 19, 2016

直奔主题:

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

XML/HTML Code复制内容到剪贴板
  1. <div><span></span></div>    

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

CSS Code复制内容到剪贴板
  1. div{   
  2. width200px;   
  3. height200px;   
  4. color#fff;   
  5. border#eee 2px solid;   
  6. }   
  7. div > span{   
  8. width: 100%;   
  9. height: 100%;   
  10. positionrelative;   
  11. background-color#000;   
  12. display: flex;   
  13. justify-contentcenter;   
  14. align-items: center;   
  15. font-size80px;   
  16. animation: anims 1s ease-in;   
  17. }  

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

CSS Code复制内容到剪贴板
  1. @keyframes anims {   
  2.     0% {   
  3.       rightright0px;   
  4.       top: 0;   
  5.       transform: scale(0);   
  6.      opacity: 0.2;   
  7.     }   
  8.     50%{   
  9.       top: 0;   
  10.       rightright: -300px;   
  11.       transform: scale(0.5);   
  12.      opacity: 0.6;   
  13.     }   
  14.   
  15.     90%{   
  16.       top: 0;   
  17.       rightright: -10px;   
  18.       transform: scale(0.99);   
  19.       opacity: 0.9;   
  20.     }   
  21.   
  22.     100%{   
  23.       top: 0;   
  24.       rightright:0px;   
  25.       transform: scale(1);   
  26.       opacity: 1;   
  27.     }   
  28.   
  29. }   

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

CSS3实现swap交换动画

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

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

HTML / CSS 相关文章推荐
微信小程序实现可实时改变转速的css3旋转动画实例代码
Sep 11 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
html通过canvas转成base64的方法
Jul 18 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
解决HTML5手机端页面缩放的问题
Oct 27 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 #HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 #HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 #HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 #HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 #HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 #HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 #HTML / CSS
You might like
PHP 安全检测代码片段(分享)
2013/07/05 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
js命名空间写法示例
2015/12/18 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
Python的Flask框架中SQLAlchemy使用时的乱码问题解决
2015/11/07 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
Python Process多进程实现过程
2019/10/22 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
人力资源部培训专员岗位职责
2014/01/02 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
会计个人实习计划书
2014/08/15 职场文书
个人债务授权委托书
2014/10/17 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
数学教师个人工作总结
2015/02/06 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
工作建议书范文
2019/07/08 职场文书
React实现动效弹窗组件
2021/06/21 Javascript
golang使用map实现去除重复数组
2022/04/14 Golang