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 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
CSS3实现的炫酷菜单代码分享
Mar 12 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
详解CSS3:overflow属性
Nov 17 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
Jan 30 HTML / CSS
2014年圣诞节倒计时网页的制作过程
Dec 05 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
May 25 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 面向对象 final类与final方法
2010/05/05 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
Python简明入门教程
2015/08/04 Python
python中的编码知识整理汇总
2016/01/26 Python
python相似模块用例
2016/03/04 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
django云端留言板实例详解
2019/07/22 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
cf战队宣传语
2015/07/13 职场文书
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android