animation动画几种效果

最新推荐文章于 2024-09-09 00:15:00 发布
最新推荐文章于 2024-09-09 00:15:00 发布
阅读量5.8k 收藏 9
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ttn456456/article/details/83183768
版权

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;
    }
  }

 

ttn456456
关注
animation动画的结合效果
04-03
"animation动画的结合效果"是指通过巧妙地组合多种动画类型，创建出复杂且引人入胜的视觉表现，例如标题中提到的“蝴蝶飞舞”的动画效果。这样的动画效果通常涉及到平移、旋转、缩放等多种动画属性的综合运用。 ...
css3大绝技之animation动画
wj624的博客
04-27 1万+
✨✨✨css3大绝技之animation动画 动画( animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 制作动画分为两步: 1．先定义动画 2．再使用(调用)动画 ✨✨🎈 动画的基本使用 ✨🎈🎈 用keyframes定义动画（类似定义类选择器） 语法格式： @keyformes 动画名称 { 0% { width:100px; } 100% { width:200px;
动画效果--animation
weixin_51391923的博客
07-13 4338
1.动画的基本使用 2.@keyframes 定义动画 3.初步使用 1.常见的一些属性 2.复合属性和拆分属性 3.动画帧（steps实现逐帧动画） 动画( animation)是CSS3https://so.csdn.
属性动画、转场动画、帧动画
最新发布
m0_51766864的博客
09-09 2714
今日核心：容器组件：属性动画、转场动画、ImageAnimator属性值的变化，通常会引发 UI 的变化,结合动画可以让这个变化过程【更为流畅】，反之这个过程将在一瞬间完成，用户体验不好，观感突兀。
css的animation动画
yuan0209的博客
11-25 1万+
顾名思义，它可以控制动画的状态 – 运行或者暂停,类似于视频播放器的开始和暂停,是 CSS 动画中有限的控制动画状态的手段之一。在 1-2 秒范围内随机，这样，我们就可以得到非常自然且不同的上升动画效果，基本不会出现重复的画面，很好的模拟了随机效果。属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由。中定义的第一帧这种说法，因为动画运行的第一帧和最后一帧的实际状态还会受到动画运行方向。，可以有效的构建更为随机的动画效果，让动画更加的自然。
animation动画全解
技术无止境，人生仍探索。
07-23 7718
animation八大属性共用 代码 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=
CSS中animation动画-详解
热门推荐
qq_48109675的博客
08-30 4万+
1、animation-name ：xx （设置关键帧的名称为xx） 2、animation-duration：5s （动画持续时间为5s） 3、animation-timing-function： linear （动画时间曲线 也叫做运行速度为匀速） 取值： linear 匀速、 ​ ease （默认）低速开始—>加速—>结束前减速 、 ease-in 以低速开始、ease-out 以低速结束、ease-in-out 以低速开始和结束。 cubic-bezier(n,n,n,n)
CSS3 Animation文字动画特效
06-24
描述中提到的7款不同的文字动画特效，可能包括但不限于以下几种： 1. **滑动进入**：文字从页面边缘滑入，可以是水平或垂直方向。 2. **淡入淡出**：文字的透明度逐渐变化，产生进入或离开的视觉效果。 3. **旋转...
Android 动画实现几种方案
01-21
Android 动画实现几种方案 在 Android 的 FrameWork 中，为我们提供三种动画的实现方式：逐帧（Frame）动画、视图/补间动画（View Animation）和属性动画（Property Animation）。由于，这三种动画的实现方式和针对...
安卓动画效果相关-animation的结合蝴蝶飞的动画使用动画里面的几种类型.zip
07-29
这个压缩包文件“安卓动画效果相关-animation的结合蝴蝶飞的动画使用动画里面的几种类型.zip”似乎包含了一个实例项目，用于演示如何利用Android的animation API实现一个蝴蝶飞舞的动画效果。在Android中，有多种...
安卓动画几十种效果
10-31
本资料主要涵盖了安卓系统中的几十种动画效果，包括对话框、视图位移、缩放以及渐变效果，旨在帮助开发者实现各种复杂的设计需求。 首先，让我们深入理解安卓动画的基础。在安卓中，动画分为两种类型：属性动画...
animation动画及3D
karry_yuan的博客
04-11 4220
animation动画及3D
CSS animation动画使用详解
Gik99的博客
07-12 3662
css之animation动画详解
Animation动画
一李
08-31 597
animation-name：关键帧的名称 animation-duration：一个动画周期的时长 animation-timing-function：动画的默认效果 animation-delay：延迟时间---动画外的属性 animation-iteration-count：动画执行效果重复-delay对其不起作用 animation-direction:normal（顺时针）reverse(反转)动画执行的方向 animation-fill-mode:backwards（与之前的状态一.
animation 动画的定义和使用
baidu_31345523的博客
12-11 2279
@keyframes 定义动画 @keyframes myname{   0%{}   50%{}   100%{} } 调用动画 .div{     animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s;
animation动画
weixin_46048542的博客
08-19 1691
animation-name 规定需要绑定到选择器的 keyframe 名称。。 animation-duration 规定完成动画所花费的时间，以秒或毫秒计。默认值:0 animation-delay 规定在动画开始之前的延迟。值单位可以是秒（s）或毫秒（ms）。默认值: 0,提示: 允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。 animation-iteration-count 规定动画应该播放的次数。默认值:1 animation-timing-function 规定动画的速度曲线。默
动画效果：animation
qq_50260510的博客
03-13 956
实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）。（1）调用动画 animation:动画名 动画执行时间；（2）@keyframes 动画名字(不要用中文)；（3）开始状态from 如果是原点取值为0,是可以省略的，结束状态to；（0% 相当于from，100% 相当于to）；（1）infinite循环次数和方向alternate一般搭配使用；（2）infinite循环次数,alterna反向执行无法和结束状态一起使用；
CSS3新特性之animation动画、3D转换(含两面翻转的盒子案例、swiper插件)、浏览器私有前缀
Bulut0907
02-19 2366
近大远小物体后面遮挡不可见x轴：水平向右。注意： x右边是正值，左边是负值y轴：垂直向下。注意： y下面是正值，上面是负值z轴：垂直屏幕。注意： 往外面是正值，往里面是负值。
CSS动画（animation）详解
我只是个很菜的前端
10-25 4万+
CSS动画（animation）详解
unity 获取animation动画
08-08
在Unity中获取动画有几种方法。 首先，可以使用Unity的Animator组件来获取动画。Animator组件允许您在游戏对象上控制、管理和播放动画。您可以通过在代码中访问组件来获取动画。例如，可以使用GetComponent方法从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值