erstellen von "shiny" - Effekt mit css gradient

Ist es möglich, erstellen Sie einen Verlauf wie das von den glänzenden Effekt auf dem iphone in dem link unten nur mit css?
http://prntscr.com/22oa4f

Ich habe versucht, mit dem folgenden code ist es aber nicht "glänzend"

background-image: -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-image: -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-image: 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));

Habe ich einen container in diesem jsfiddle -> http://jsfiddle.net/3qWYL/

wie "glänzend" wollen Sie ? in deinem jsFiddle, es gibt nur eine schwarze box.
Hier ist ein Beispiel für eine komplette iPhone-erstellt mit CSS3: codepen.io/lazyronin/pen/oEzwJ

InformationsquelleAutor surfs up | 2013-11-08

css gradient

Überprüfen, Ist es das, was Sie suchen. jsFiddle demo

HTML

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

CSS

.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));
}

das ist eigentlich nicht glänzend genug
Versuchen Sie, ändern der Farbe,Deckkraft und position zu bekommen Ihren gewünschten Ergebnis.
Dies funktioniert nicht im IE 11 auf Windows 10 Tech Preview.
Wie verwenden Sie Grad statt left top/right bottom Wenn Sie möchten, ändern Sie den Winkel des Verlaufs in diesem Beispiel? Ich kann nicht einen Weg finden, der funktioniert.

InformationsquelleAutor Sobin Augustine

Versuchen diese:

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

Aber es war nicht glänzend..
ermhh.. es sieht glänzend für mich auf chrome.

InformationsquelleAutor W.K.S

.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%);
}

InformationsquelleAutor JacobG182

Überprüfen Sie diese codepen aus

HTML

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

CSS

.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%);
}

}

InformationsquelleAutor Allan Guwatudde

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.