5

我有一个带有边框的图像。我想让边框淡入淡出。不透明度 + webkit 关键帧可以做到这一点吗？想法？

谢谢

4

3 回答 3

19

这是一个例子：

@keyframes border-pulsate {
    0%   { border-color: rgba(0, 255, 255, 1); }
    50%  { border-color: rgba(0, 255, 255, 0); }
    100% { border-color: rgba(0, 255, 255, 1); }
}

img {
    border: 20px solid cyan;
    animation: border-pulsate 2s infinite;
}

这是小提琴：http: //jsfiddle.net/RYT8L/4/

请注意，在现实世界中，您必须包含所有供应商前缀，或者使用Lea Verou的名为 -prefix -free的优秀工具（这是我在那个小提琴中使用的）。

于 2012-01-06T03:24:11.760 回答
9

试试这个脉动的边界： DEMO (jsfiddle)

@-webkit-keyframes pulseBorder {
  from {
    border: solid 1px #f00;
  }
  to {
    border: solid 10px #f00;
  }
}

div {
  -webkit-animation-name: pulseBorder;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
  -webkit-animation-direction: alternate;
  -webkit-animation-duration: 0.5s;
  text-align: center;
  border: solid 1px #f00
}
<div id="content">
  hello
</div>

于 2013-06-23T11:15:37.080 回答
1

我做了以下处理以处理其他元素的边框颜色可能不同的情况。

这允许在具有不同颜色边框的多个元素上使用一个关键帧。您需要做的就是将 rgba 编辑为背景颜色。

@keyframes border-pulse {
    50% {
        border-color: rgba(255, 255, 255, 0);
    }
}

#first {
    width: 50px;
    height: 50px;
    border: 5px solid cyan;
    animation: border-pulse 2s infinite;
}

#second {
    width: 50px;
    height: 50px;
    border: 5px solid red;
    animation: border-pulse 2s infinite;
}
<div id="first"></div>
<div id="second"></div>

于 2020-01-14T10:24:28.870 回答