首页 > 其他 > 详细

vue 首页图片停留10秒淡入淡出效果

时间:2020-07-14 09:41:47      阅读:153      评论:0      收藏:0      [点我收藏+]

 

朋友推荐的一个展示效果:https://codepen.io/jnboyer/pen/qZLeWN?__cf_chl_jschl_tk__=4db4eff5d4872bd0ba8c0726ea2841c868cb52fd-1594638715-0-Af3ZEKToHb2myZUPH1JFluZ0xgw447GSAiF3Khhfoj0YSZQU3yEPxwfsvtw2tIpVNNX3NOLrmdTGedZZpaW80pBwzjpOB_WlC78BlW1xVGdMJ8e3U4r66UTTM5b1j0u_sKFgc5FHIM47p1yb9gB9XoBv9hmaFl1sR-_KC_6lHHR0mmt4HlR3L3-G8dfKetb5rA5dx3fcBMA3oQDs_gFWVn_DrB9FhjfVzArXTPh5Hb2RxRDGtkJsiZFh_ttfXR7LguKjOadTY3U5IQQRnSA_CAMcsVP3VRHptshLu5ka9_W5BRVLUX7r1r7AiVAyYljVfrUqN9hr8YMvs49JvUUKdIEADzveLS5S7kvnSgUwg5Gt

 

我的思路是将要展示的图片都放在一个div里面通过定时器,动态控制要展示那一张

html

技术分享图片

 

 script

技术分享图片

 

 

style

 

.welcome__banner {
    position: relative;
    background: rgba(255, 255, 255, 1);
    border-radius: 6px;
    height: 30%;
    width: 100%;

    .banner__img {
      // position: absolute;
      width: 100%;
      height: 100%;

      // animation: fade 10s 0s infinite;
      animation-name: fade; //规定需要绑定到选择器的 keyframe 名称。。
      animation-duration: 5s; //规定完成动画所花费的时间,以秒或毫秒计。
      animation-timing-function: ease-in-out; //规定动画的速度曲线。
      // animation-delay: 2s; //规定在动画开始之前的延迟。
      animation-iteration-count: infinite; //规定动画应该播放的次数。
      animation-direction: normal; //规定是否应该轮流反向播放动画。
      z-index: 50;
    }

    @keyframes fade {
      0% {
        opacity: 0.1;
      }
      25% {
        opacity: 0.75;
      }
      50% {
        opacity: 0.5;
      }
      75% {
        opacity: 0.75;
      }
      100% {
        opacity: 1;
      }
    }
  }

vue 首页图片停留10秒淡入淡出效果

原文:https://www.cnblogs.com/xiaonanxun/p/13297169.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!