脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > css3 >

CSS3实现swap交换动画

  发布时间：2016-01-19 15:21:09   作者：佚名   我要评论
这篇文章主要为大家介绍了CSS3实现swap动画，实现一个交换动画，一个笑脸慢慢从远处，回到自己的原来位置的一种效果，这种动画在JS里面也是很多见的，感兴趣的小伙伴们可以参考一下

直奔主题：

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

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

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

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

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

CSS Code复制内容到剪贴板
  1. @keyframes anims {   
  2.     0% {   
  3.       rightright: 0px;   
  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. }   

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

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

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

相关文章

  • CSS3 最强二维布局系统之Grid 网格布局

    CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局，本文介绍CSS3 最强二维布局系
    2025-02-27

  • 如何使用CSS3实现波浪式图片墙

    本文介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同
    2025-02-27

  • CSS3模拟实现一个雷达探测扫描动画特效(最新推荐)

    文章介绍了如何使用CSS3实现一个雷达探测扫描的效果,包括夜色背景、蜘蛛网盘、扫描体的转动效果、尾巴阴影以及被扫描到的光点,通过HTML和CSS的配合,实现了丰富的动画效果,
    2025-02-21

  • css3 display:flex 弹性盒模型的使用方法

    CSS3的Flexbox是一种强大的布局模式,通过设置display:flex可以轻松实现对齐、排列和分布网页元素,它解决了传统布局方法中的对齐、间距分配和自适应布局等问题,接下来通过本
    2025-02-19

  • css3 实现icon刷新转动效果

    本文给大家介绍css3 实现icon刷新转动效果，文章开头给大家介绍了webkit-transform、animation、@keyframes这三个属性，结合实例代码给大家介绍的非常详细，感兴趣的朋友一
    2025-02-19

  • CSS3动态效果之过渡属性(最新推荐)

    CSS3过渡属性用于实现元素从一种样式平滑过渡到另一种样式,通过设置transition-property过渡属性、transition-duration过渡时长transition-timing-function过渡函数和trans
    2025-02-19

  • CSS3实现动态旋转加载样式的示例代码

    本文介绍了如何使用CSS3创建一个简单的动态旋转加载样式,通过定义一个带有类名“loader”的HTML元素,并使用CSS样式和@keyframes规则来实现旋转动画,你可以根据需要调整样式
    2025-02-19

  • 使用CSS3实现平滑的过渡动画效果(实例代码)

    这篇文章主要介绍了如何使用CSS3的transition属性实现平滑的过渡动画，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友一起看看吧
    2025-02-13

  • CSS3中使用flex和grid实现等高元素布局的示例代码

    本文介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果，感兴趣的朋
    2025-02-11

  • 使用CSS3和SVG创建圆形进度条动画效果

    CSS3和SVG的结合使用为网页设计带来了创新的动态视觉效果,本文通过一个圆形进度条的动画特效示例,展示了如何利用CSS3的动画功能和SVG的矢量图形能力来创建丰富的用户交互体
    2024-10-24

最新评论

关注微信公众号

扫一扫