Question

我试图为图片创建一个闪烁效果，但我发现你可以使用＆＃34; Blink＆＃34;动画。但我对如何设置时间限制毫无头绪，例如：在4秒内开启和关闭。

我使用不同百分比的不透明度的Keyframe（闪烁）。

你们有没有机会帮助我，我会非常感激。

这是我尝试过的代码。

＆＃13;

<html>

<head>
  <style>
    /* Firefox old*/
    
    @-moz-keyframes blink {
      10% {
        opacity: 90;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 80;
      }
    }
    
    @-webkit-keyframes blink {
      10% {
        opacity: 90;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 100;
      }
    }
    /* IE */
    
    @-ms-keyframes blink {
      10% {
        opacity: 60;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 80;
      }
    }
    /* Opera and prob css3 final iteration */
    
    @keyframes blink {
      10% {
        opacity: 60;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 80;
      }
    }
    
    .blink-image {
      -moz-animation: blink normal 2s infinite ease-in-out;
      /* Firefox */
      -webkit-animation: blink normal 2s infinite ease-in-out;
      /* Webkit */
      -ms-animation: blink normal 2s infinite ease-in-out;
      /* IE */
      animation: blink normal 2s infinite ease-in-out;
      /* Opera and prob css3 final iteration */
    }
  </style>
</head>

<body>
  <p align="center">
    <img class="blink-image" src="images/GetOrderTimeForChristmas.jpg" width="390" />
</body>

</html>

＆＃13;

Answer 1

首先要注意的是： opacity属性可以取0.0到1.0 的值。值越低，透明度越高

IE8及更早版本使用过滤器：alpha（opacity = x）。 x可以取0到100之间的值。较低的值使元素更透明。我对您的代码进行了更改，您可以在下面找到该代码段。

希望它有效！

＆＃13;

<html>
<head>
<style>
/* Firefox old*/
@-moz-keyframes blink {
    from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
} 

@-webkit-keyframes blink {
    from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}
/* IE */
@-ms-keyframes blink {
    from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
} 
/* Opera and prob css3 final iteration */
@keyframes blink {
    from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
} 
.blink-image {
    -moz-animation: blink normal 4s infinite ease-in-out; /* Firefox */
    -webkit-animation: blink normal 4s infinite ease-in-out; /* Webkit */
    -ms-animation: blink normal 4s infinite ease-in-out; /* IE */
    animation: blink normal 4s infinite ease-in-out; /* Opera and prob css3 final iteration */
}
</style>
</head>
<body>
<p align="center">
<img class="blink-image" src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" width="390" />
</body>
</html>
javascript jquery html css
shareeditflag

＆＃13;

HTML / CSS Blink动画网站

1 个答案: