animation动画几种效果

最新推荐文章于 2024-05-06 19:28:55 发布
最新推荐文章于 2024-05-06 19:28:55 发布
阅读量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
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
animation动画及3D
karry_yuan的博客
04-11 4137
animation动画及3D
animation 动画的定义和使用
baidu_31345523的博客
12-11 2223
@keyframes 定义动画 @keyframes myname{   0%{}   50%{}   100%{} } 调用动画 .div{     animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s;
前端css中animation(动画)的使用
最新发布
小蜗牛764号的博客
05-06 2021
animation常伴随着动画帧`@keyframes`一起使用。本文主要说明animation都有啥属性，然后简单的进行使用。 animation动画有多个属性，每个属性也有相应相关的值。另外我们使用过程中也可以使用简便方法，如`“animation:”+后面各属性的值，用空格隔开+“；”`的形式设置动画效果。举例如：`animation: box1 3s linear 2s infinite;`
CSS3（三）Animation 入门详解
热门推荐
CSDN前端知识共享
04-17 7万+
Animation 前言 好的前端工程师，会更注重用户的体验和交互。那么动画就是将我们的静态页面，变成具有灵动性，为我们的界面添加个性的一种方式。 下面是七喜的官方主页，它就是很好的富交互样例。鼠标移动到导航栏，就会播放多种动效，给用户一种酷炫的体验。我觉得用户体验，才是前端工程师更加关注的问题，而不是一味追求Javascript的编码技能。 七喜官方网站 A...
css动画里面transition和transform以及animation和和keyframes几个属性的区别，以及语法格式
Jason_from_China的博客
11-24 1726
TRANSTION
animation的八大属性及HTML基础动画效果——平移、旋转、缩放、倾斜、过渡
weixin_43183219的博客
01-09 1万+
animation的八个基础属性、关键帧详细介绍，平移、旋转、缩放、倾斜、过渡的解释及应用
animation动画的结合效果
04-03
"animation动画的结合效果"是指通过巧妙地组合多种动画类型，创建出复杂且引人入胜的视觉表现，例如标题中提到的“蝴蝶飞舞”的动画效果。这样的动画效果通常涉及到平移、旋转、缩放等多种动画属性的综合运用。 ...
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
本资料主要涵盖了安卓系统中的几十种动画效果，包括对话框、视图位移、缩放以及渐变效果，旨在帮助开发者实现各种复杂的设计需求。 首先，让我们深入理解安卓动画的基础。在安卓中，动画分为两种类型：属性动画...
CSS的动画特效（animation）
githubcurry
12-09 1万+
今天来讲一下css中很实用的一个效果-动画（animation）。 动画就是使元素从一种样式逐渐变化为另一种样式的效果。我们可以改变任意多的样式任意多的次数（很官方的回答）。 为了方便大家和我自己理解这个概念，我们可以想像一下准备拍电影的时候，我们需要一个电影名吧，需要设置电影的时间吧。而且拍电影就是一帧一帧，叫做关键帧。所以我们设置动画的时候要讲清楚电影名（animation-name），电影时长（animation-duration），电影啥时候开始（animation-delay），播放或者暂停（a.
动画的基本使用
yyh619的博客
01-28 1441
—— animation调用 目录 定义及语法 动画的调用 重点注意 常用属性 调用速写 典型例子 波点效果 放映图标效果 打字机及循环移动效果 定义及语法 使用：用@keyframes定义动画，属于CSS3范畴； 格式： @keyframes 动画名称 { from / 0% { 起始态； } n% { 中间态（可多个）； ...
CSS动画效果（animation属性）解析
shao_xuan_的博客
10-21 4316
CSS动画效果（animation属性）解析动画与变形和过渡的区别@keyframesanimation-name属性animation-duration属性animation-timing-function属性animation-delay属性animation-iteration-count属性animation-direction属性animation属性基础练习总结 动画与变形和过渡的区别 在CSS3中， 过渡 和 变形 只能设置元素的变换过程，并不能对过程中的某一环节进行精确控制，例如 过渡 和
Animation四种动画效果的了解
wangzhantao的专栏
03-04 669
    Android JDK为我们提供了4种动画效果，分别是：            AlphaAnimation         透明度动画效果            ScaleAnimation         缩放动画效果            TranslateAnimation   位移动画效果            RotateAnimation       旋转动画效果  ...
HTML中对于 animation（动画）属性的使用方法
m0_64401301的博客
12-16 5206
这篇文章主要分享了以举例的形式来分享CSS3中的animation属性的用法
H5中需要掌握的 ANIMATION 动画效果
tenyit的专栏
12-05 1万+
CSS3的动画在PC网页上或者APP上用得越来越多,比如H5页面的应用,目前在营销传播上的意义比较大,还有企业官网或者APP主要介绍也用得比较多,当然还有很多地方都用到.所以学习css的动画也迫在眉睫.那我们就进入主题! animation 属性在CSS中可以使用其他的css属性,来实现动画,例如color,background-color,height或者width.每一个动画
CSS之animation动画效果
The_upside_of_down的博客
09-16 2221
  众所周知，css3中的animation动画效果很漂亮。首先，我们来看看animation的属性： 属性 描述 css @keyframes 规定动画，动画的规则 3 animation 所有动画的简写，除了animation-play-state属性 3 aniamtion-name 规定@keyframes动画的名称 3 ...
CSS动画效果
dayexiaofan的博客
05-28 5万+
继上篇文章之后，先对之前学的内容进行复习一下 01、过渡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 100px; height...
unity 获取animation动画
08-08
在Unity中获取动画有几种方法。 首先，可以使用Unity的Animator组件来获取动画。Animator组件允许您在游戏对象上控制、管理和播放动画。您可以通过在代码中访问组件来获取动画。例如，可以使用GetComponent方法从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值