1、圈无线向外扩散，难点是要补充最里层的圈，让其透明度为0时回到最初位置，再显现出来，达到视觉上的无缝链接

标题
@keyframes rotate1 {0%{transform: scale(1);opacity: 1;}16.7%{transform: scale(1.4);opacity: 0.8;}33.3%{transform: scale(1.8);opacity: 0.6;}50%{transform: scale(2.2);opacity: 0.4;}66.7%{transform: scale(2.6);opacity: 0.2;}83.3%{transform: scale(3.0);opacity: 0;}99.9%{transform: scale(1);opacity: 0;}100%{transform: scale(1);opacity: 1;}
}
@keyframes rotate2 {// from {//   transform: scale(1);//   opacity: 1;// }// to {//   transform: scale(1.6);//   opacity: 0.8;// }0%{transform: scale(1.4);opacity: 0.8;}16.7%{transform: scale(1.8);opacity: 0.6;}33.3%{transform: scale(2.2);opacity: 0.4;}50%{transform: scale(2.6);opacity: 0.2;}66.7%{transform: scale(3.0);opacity: 0;}83.2%{transform: scale(1);opacity: 0;}83.3%{transform: scale(1);opacity: 1;}100%{transform: scale(1.4);opacity: 0.8;}
}
@keyframes rotate3 {0%{transform: scale(1.8);opacity: 0.6;}16.7%{transform: scale(2.2);opacity: 0.4;}33.3%{transform: scale(2.6);opacity: 0.2;}50%{transform: scale(3.0);opacity: 0;}66.6%{transform: scale(1);opacity: 0;}66.7%{transform: scale(1);opacity: 1;}83.3%{transform: scale(1.4);opacity: 0.8;}100%{transform: scale(1.8);opacity: 0.6;}
}
@keyframes rotate4 {// from {//   transform: scale(1);//   opacity: 1;// }// to {//   transform: scale(2.2);//   opacity: 0.4;// }0%{transform: scale(2.2);opacity: 0.4;}16.7%{transform: scale(2.6);opacity: 0.2;}33.3%{transform: scale(3.0);opacity: 0;}50%{transform: scale(1);opacity: 0;}50.1%{transform: scale(1);opacity: 1;}66.7%{transform: scale(1.4);opacity: 0.8;}83.3%{transform: scale(1.8);opacity: 0.6;}100%{transform: scale(2.2);opacity: 0.4;}
}
@keyframes rotate5 {// from {//   transform: scale(1);//   opacity: 1;// }// to {//   transform: scale(2.5);//   opacity: 0.2;// }0%{transform: scale(2.6);opacity: 0.2;}16.7%{transform: scale(3.0);opacity: 0;}33.3%{transform: scale(1);opacity: 0;}33.4%{transform: scale(1);opacity: 1;}50%{transform: scale(1.4);opacity: 0.8;}66.7%{transform: scale(1.8);opacity: 0.6;}83.3%{transform: scale(2.2);opacity: 0.4;}100%{transform: scale(2.6);opacity: 0.2;}
}
@keyframes rotate6 {// from {//   transform: scale(1);//   opacity: 1;// }// to {//   transform: scale(2.8);//   opacity: 0;// }0%{transform: scale(3.0);opacity: 0;}16.6%{transform: scale(1);opacity: 0;}16.7%{transform: scale(1);opacity: 1;}33.3%{transform: scale(1.4);opacity: 0.8;}50%{transform: scale(1.8);opacity: 0.6;}66.7%{transform: scale(2.2);opacity: 0.4;}83.3%{transform: scale(2.6);opacity: 0.2;}100%{transform: scale(3.0);opacity: 0;}
}

2、3D旋转效果，并隐藏其中一个值

matrix3d 主要用到的几个值代表：rotate、translate

其中转到前面时字体要提前变色，可以promise实现

标题
timeout(time) {let that = this;return new Promise(function (resolve, reject) {that.isYellow2 = false;that.isYellow1 = true;setTimeout(resolve, time);})},
that.timeout(500).then(function () {that.timer = setInterval(()=>{if (that.isYellow2 === true) {that.isYellow1 = true;that.isYellow2 = false;} else if (that.isYellow1 === true) {that.isYellow4 = true;that.isYellow1 = false;} else if (that.isYellow4 === true) {that.isYellow3 = true;that.isYellow4 = false;} else {that.isYellow2 = true;that.isYellow3 = false;}},2000);})
@keyframes rotate1 {0% {transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 250, 70, 0, 1);z-index: 99;}25% {transform: matrix3d(1.4, 0, 0, 0, 0, 1.4, 0, 0, 0, 0, 1, 0, 100, 110, 0, 1);z-index: 100;}50% {transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -50, 70, 0, 1);z-index: 99;opacity: 1;}75% {transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 30, 0, 1);z-index: 100;opacity: 0;}100%{transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 250, 70, 0, 1);z-index: 99;opacity: 1;}
}
@keyframes rotate2 {0% {transform: matrix3d(1.4, 0, 0, 0, 0, 1.4, 0, 0, 0, 0, 1, 0, 100, 60, 0, 1);z-index: 100;}25% {transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -50, 20, 0, 1);z-index: 99;opacity: 1;}50% {transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, -30, 0, 1);z-index: 100;opacity: 0;}75%{transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 250, 20, 0, 1);z-index: 99;opacity: 1;}100%{transform: matrix3d(1.4, 0, 0, 0, 0, 1.4, 0, 0, 0, 0, 1, 0, 100, 60, 0, 1);z-index: 100;}
}
@keyframes rotate3 {0% {transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -50, -40, 0, 1);z-index: 99;opacity: 1;}25% {transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, -80, 0, 1);z-index: 100;opacity: 0;}50%{transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 250, -40, 0, 1);z-index: 99;opacity: 1;}75% {transform: matrix3d(1.4, 0, 0, 0, 0, 1.4, 0, 0, 0, 0, 1, 0, 100, 10, 0, 1);z-index: 100;}100%{transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -50, -40, 0, 1);z-index: 99;}
}
@keyframes rotate4 {0% {transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, -140, 0, 1);z-index: 100;opacity: 0;}25%{transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 250, -90, 0, 1);z-index: 99;opacity: 1;}50% {transform: matrix3d(1.4, 0, 0, 0, 0, 1.4, 0, 0, 0, 0, 1, 0, 100, -50, 0, 1);z-index: 100;}75%{transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -50, -90, 0, 1);z-index: 99;opacity: 1;}100% {transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, -140, 0, 1);z-index: 100;opacity: 0;}
}

3、图片从底部开始加载,即效果图中的竖线，分次加载可以用settimeout实现

标题
@keyframes scaleCol {0% {transform: scaleY(0);transform-origin: 0 bottom;}100%{transform: scaleY(1);transform-origin: 0 bottom;}}

animation动画几种效果相关推荐

  1. 自学前端第二十四天:Animation动画栈帧效果

    CSS3 帧动画 amimation @keyframes amimation 是transition过渡的高级升级版 1.为什么要 amimation 一帧一帧的具体动画,因为transition进 ...

  2. android中设置Animation 动画效果

    在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...

  3. Android动画开发——Animation动画效果

    动画类型 Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面 ...

  4. android编程xml动画,Android中xml设置Animation动画效果详解

    在Android中,Animation动画效果的实现可以通过两种方式进行实现,一种是tweened animation渐变动画,另一种是frame by frame animation画面转换动画. ...

  5. android 属性动画伸缩,Android动画开发——Animation动画效果详解

    在Android中,分别可以在xml中定义Animation,也可以在程序代码中定义. 动画类型Android的animation由四种类型组成 XML中alpha渐变透明度动画效果 scale渐变尺 ...

  6. Animation动画效果

    动画类型 Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面 ...

  7. css animation动画完成后隐藏_如何使用CSS实现旋转地球动画效果

    旋转地球功能实现主要借助于CSS动画效果完成,通过移动地图背景图层,云彩图层等,在视觉上呈现出旋转地球效果.旋转地球最终实现效果如下图所示: 旋转地球效果展示 设计思路与核心技术 旋转地球效果实现主要 ...

  8. animation动画效果 1002 css3

    animation动画效果 1002 css3 什么是动画 使用步骤 如何定义动画 @keyframes 动画名称{from{属性:值}percentage{属性:值}to{属性:值} } 或者 @k ...

  9. 使用css animation动画做边框闪动效果

    使用css animation动画做边框闪动效果 在拖拽div节点时,给div节点添加diagramTop-item-click样式,使用css animation动画0.5秒执行一次. css样式 ...

最新文章

  1. (转)TabContainer要实现服务器端回传
  2. GDB 使用手册(谷歌翻译)
  3. 容器开启数据服务之旅系列（一）：Kubernetes如何解自建PostgreSQL运维之痛
  4. Java 11 快要来了，编译 运行一个命令搞定！
  5. hdu 1233 还是畅通工程 Kruskal 最小生成树 并查集
  6. XML与Web数据挖掘
  7. python桌面图形_Python桌面图形程序美化的方法论
  8. 火币网的macd怎么算的_黄金投资中MACD的计算方式
  9. [转载]基于TFS实践敏捷-修复Bug和执行代码评审
  10. linux标准I/O——按字符输入和输出
  11. RTMP协议封装H264格式详解
  12. AD18如何设置过孔直连、焊盘十字
  13. 拼多多sdk php,标签PHP拼多多SDK文章 - 零分博客 - 关注互联网且乱扯淡互联网的个人博客...
  14. python使用神器_python 神器
  15. CAD二次开发学习笔记四(得到选中的实体，修改实体，如等分线段)
  16. nlp文本预处理构建词汇表
  17. 初试-基于神经网络的植物识别
  18. 作业5管理用户、组及权限
  19. grant,revoke,deny 服务器权限控制命令
  20. 关于Windows Paint的基础图层透明背景的操作说明

热门文章

  1. Win10自带的邮件email上登录qq邮箱|解决无法访问此账户：xx问题
  2. 机房监控系统的功能特点以及工作原理!
  3. Java实现：LeetCode活字印刷
  4. python大赛对名_团队作业1——团队展示选题
  5. 分析Adobe Illustrator CC（AI）中的橡皮擦和直线工具
  6. html5 js 多触点,多触点交互桌面左右手区分方法
  7. 恩智浦 i.MX8X BSP 的编译
  8. 再也不用担心因为PowerBI 可视化看板加班了——手把手详细教学
  9. 光场相机系列-----相机标定
  10. 解析肖特基二极管的优缺点及应用