美文网首页
css 循环 帧动画

css 循环 帧动画

作者: 江火渔枫 | 来源:发表于2023-03-12 16:09 被阅读0次
<template>
    <div class="page">
        <div class="bg-img"></div>
    </div>
</template>
<style lang="scss" scoped>
.page{
  background: url("~@/assets/01/bg1.png") no-repeat center/contain;
}
.bg-img {
  position: absolute;
  top: 30px;
  width: 100%;
  height: 100%;
  animation: sg-animate 4s infinite; //在两秒内完成序列png动画图片来(回播放alternate),并循环无限次(infinite)
 
  $bgPreUrl: "~@/assets/01/bgs/红绸00"; //序列图路径前缀
  @keyframes sg-animate {
    $len: 39; //逐帧动画画面自由39张图
    @for $i from 0 through $len {
      #{ $i * 2.5% } {
        background-image: url(#{$bgPreUrl}#{$i}.png);
        opacity: 1;
        // background-image: url("~@/assets/01/bgs/红绸0000.png");
      }
    }
    // 序列图播放完毕那一刻到100%时间(第2s结束那一刻)之间都停留在最后一张序列图静止不动
    #{ $len * 2.5% },
    100% {
      opacity: 1;
      background-image: url(#{$bgPreUrl}#{$len}.png);
    }
  }
}
</style>

方法2

img{
  display: block;
  position: absolute;
  bottom:0;
  width: 100%;
  height: 100%;
  opacity: 1;
}
@keyframes stys{
  0%{opacity: .5;}
  100%{opacity: 0;}
}
.image2,.image3,.image4,.image5,.image6,.image7,.image8,.image9{
  opacity: 0;
}
.image1,.image2,.image3,.image4,.image5,.image6,.image7,.image8,.image9{
  animation-name: stys;
  animation-timing-function:ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.image2,.image3,.image4,.image5,.image6,.image7,.image8,.image9{
  animation-duration: 1s;
}

相关文章

  • css动画

    css动画首先要明白动画是一帧一帧的,由多个帧拼起来的动画 @keyframes 此为动画样式中的关键帧,用关键帧...

  • Android帧动画的实现

    帧动画就是图片的循环播放 实现帧动画有两种方式: 1.通过代码实现: //帧动画对象AnimationDrawab...

  • Android动画

    Drawable Animation 帧动画,多张图片循环播放,实现动画效果。 以Xml定义一组帧动画 onesh...

  • css帧动画

    帧动画,让css动画以帧的形式表现出来,好像是连续的动画片那种效果。

  • Unity C# 通用帧动画组件

    一个通用帧动画组件:循环替换图片,代替Animation。 基类: 图片帧动画子类:

  • CSS3 animation动画

    CSS3 animation动画 1、@keyframes 定义关键帧动画2、animation-name 动画名...

  • 前端知识CSS3 animation动画

    CSS3 animation动画 1、@keyframes 定义关键帧动画2、animation-name 动画名...

  • html(入门)CSS3 animation动画

    CSS3 animation动画 1、@keyframes 定义关键帧动画2、animation-name 动画名...

  • 知识点九

    动画animation//定义:@keyframes (//关键帧) 例子: //CSS 例子: animatio...

  • CSS动画

    1.css动画实现的几种方式transitionkeyframes(animation)2.过渡动画和关键帧动画的...

网友评论

      本文标题:css 循环 帧动画

      本文链接:https://www.haomeiwen.com/subject/fvfqrdtx.html