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 flex弹性盒自动铺满写法
Sep 17 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
HTML5语音识别标签写法附图
Nov 18 HTML / CSS
使用phonegap获取位置信息的实现方法
Mar 31 HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
CSS实现漂亮的时钟动画效果的实例代码
Mar 30 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
May 21 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多图上传小程序代码
2011/07/17 PHP
php 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
JavaScript Date对象使用总结
2009/05/14 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
python实现2014火车票查询代码分享
2014/01/10 Python
Python实现二分查找算法实例
2015/05/26 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
Python中property属性实例解析
2018/02/10 Python
python 字符串追加实例
2019/07/20 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
python加载自定义词典实例
2019/12/06 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
python drf各类组件的用法和作用
2021/01/12 Python
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
食品营养与检测应届生求职信
2013/11/08 职场文书
行政专员工作职责
2013/12/22 职场文书
小学评语大全
2014/04/22 职场文书
幼儿园教师求职信
2015/03/20 职场文书
2016公司年会通知范文
2015/04/25 职场文书