创建；“闪亮的”；使用css渐变的效果

是否可以仅使用css在下面的链接中创建类似iphone上闪亮效果的渐变？


我尝试过使用以下代码，但它并不“闪亮”

我已经在这个JSFIDLE中创建了一个容器->

试试：

---

检查这个，这是你要找的吗

HTML

.btn{
位置：相对位置；
宽度：150px；
文本对齐：居中；
填料：61538462em 1em；
光标：指针；
垂直对齐：中间对齐；
颜色：#FFF；
边框：1px实心#07c；
边界半径：2px；
背景色：#0095ff；
盒影：插入0 1px 0#66bff；
}
.闪亮的：：之后{
内容：''；
显示：块；
宽度：70%；
背景：rgba（255，255，255，0.2）；
背景：线性梯度（0度，rgba（255，255，255，0.2）50%，rgba（255，255，255，0.7）100%）；/*Safari 5.1-6.0*/
背景：-o型线性梯度（0度，rgba（255，255，255，0.2）50%，rgba（255，255，255，0.7）100%）；/*Opera 11.1-12.0*/
背景：-moz线性梯度（0deg，rgba（255，255，255，0.2）50%，rgba（255，255，255，0.7）100%）；/*Firefox 3.6-15*/
背景：线性梯度（0度，rgba（255，255，255，0.2）50%，rgba（255，255，255，0.7）100%）；/*标准语法*/
左-100%；
排名：0；
身高：100%；
位置：绝对位置；
过渡：无；
-webkit转换：无；
-moz转换：无；
-o-转变：无；
-ms转换：无；
-ms变换：skewX（-20度）；/*IE 9*/
-webkit变换：skewX（-20度）；/*Safari*/
变换：skewX（-20度）；
}
.shinny:悬停：：之后{
左：150%；
过渡：所有1；
-webkit转换：所有1；
-moz转换：所有1；
-o-过渡：所有1s；
-ms转换：所有1s；
}

将鼠标悬停在我身上

查看此项

HTML

---

}

我发现这个简单的子元素+SCSS对是最漂亮的一对：

HTML[类| |类名]：

<div class={`full-indicator`}>
  <div class={`indicator-shine`}></div>
</div>

这是为“完整状态指示器”设计的，可根据自己的需要定制左/右和上/下、尺寸和颜色

---

希望这将是方便的人

你想要多亮？在您的JSFIDLE中，只有一个黑盒子。。在我看来，它在chrome上看起来很亮。事实上，这并不亮。请尝试更改颜色、不透明度和位置以获得所需的结果。这在IE 11on Windows 10技术预览版中不起作用。如果您想在该示例中更改渐变角度，如何使用度而不是

左上

/

右下

？我找不到有效的方法。

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809));

<div class="d shine"></div>

.d {
    width: 300px;
    height: 500px;
    background: #111;
}
.shine:before {
    content:"";
    position:absolute;
    width: 300px;
    height: 500px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, .15)), to(rgba(0, 0, 0, .25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, .1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
    background: -moz-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
    background: linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
}

.background {
background-image: linear-gradient(right, #111 11%, #333 56%);
background-image: -o-linear-gradient(right, #111 11%, #333 56%);
background-image: -moz-linear-gradient(right, #111 11%, #333 56%);
background-image: -webkit-linear-gradient(right, #111 11%, #333 56%);
background-image: -ms-linear-gradient(right, #111 11%, #333 56%);
background-image: gradient(right, #111 11%, #333 56%);
}

<div class="shiny"></div>

.shiny {
  width: 100%;
  height: 50px;
  background-color: #E6E9EA;
  overflow: hidden;
 }

.shiny::before{
 display: block;
 content: '';
 width: 50%;
 height:100%;
 transform: translate(50%);
 background-image: linear-gradient(to right, transparent, white, transparent);
 animation-name: shining;
 animation-duration: 3s;
 animation-iteration-count: infinite; 
}

@keyframes shining {
from {
 transform: translate(-50%);
}
to {
 transform: translate(100%);
}

<div class={`full-indicator`}>
  <div class={`indicator-shine`}></div>
</div>

.full-indicator {
      transition: 0.25s ease-in-out;
      width: 0px;
      height: 0px;
      position: absolute;
      width: 25px;
      height: 25px;
      background-color: #ff5050;
      border-radius: 50%;
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.95);
      z-index: 2;
      
      .indicator-shine {
        width: 5px;
        height: 5px;
        position: absolute;
        background-color: rgba(255, 255, 255, 0.25);
        box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.75);
        border-radius: 50%;
        top: 15%;
        right: 25%;
      }
    }