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代码绘制可爱的Hello Kitty猫
Aug 03 HTML / CSS
css3 transform属性详解
Sep 30 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
详解HTML5中download属性的应用
Aug 06 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 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去除字符串换行符示例分享
2014/02/13 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
node实现登录图片验证码的示例代码
2018/04/20 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
vue实现购物车列表
2020/06/30 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
python处理图片之PIL模块简单使用方法
2015/05/11 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
python动态规划算法实例详解
2020/11/22 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
python os.listdir()乱码解决方案
2021/01/31 Python
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
中专毕业生的自我鉴定
2013/12/01 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
工资证明格式模板
2015/06/12 职场文书