So verwenden Sie den Farbverlauf von ss3

Dieses Mal zeige ich Ihnen, wie Sie den Farbverlauf von ss3 verwenden und welche Vorsichtsmaßnahmen bei der Verwendung des Farbverlaufs von ss3 gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

„CSS Revealed“ ist ein sehr gutes Buch voller nützlicher Informationen und Überraschungen. Im Folgenden finden Sie hauptsächlich Hinweise zu einigen Effekten, die mithilfe von Farbverläufen erstellt wurden. Bitte verwenden Sie zum Anzeigen den neuesten modernen Browser.

Sehen Sie sich zunächst die nächste CSS-Anweisung an:

linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

Dies ist ein linearer Farbverlauf. Der erste Parameter ist die Farbverlaufsrichtung, die optional ist. Es kann ein Winkel sein, und der Wert des Winkels ist ein Grad, z. B. 45 Grad, 90 Grad. Sie können auch nach links (von rechts nach links), nach unten (von oben nach unten) verwenden; der zweite und dritte Parameter sind Verlaufsfarben. Der einfachste Weg, es zu schreiben, kann also sein:

background: linear-gradient(aquamarine,orange)

Die Standardeinstellung ist ein Farbverlauf von oben nach unten. Aber wenn wir keine Farbverläufe wollen, brauchen wir Farbbalken. Der Trick besteht darin, keine Lücke zwischen den beiden Farben zu lassen, denn wenn Sie eine Lücke lassen, entsteht ein Verlaufs- Übergangseffekt . Wir können also jeweils 50 % festlegen. Diese 50 % stellen die Farbposition dar. Kann auch eine Längeneinheit sein.

background: linear-gradient(aquamarine 50%,orange 50%)

Was ist, wenn wir mehrere Farben benötigen, wie zum Beispiel Blau, Weiß und Rot?

 background: linear-gradient(90deg,aqua 0 ,aqua 33%,white 0 ,white 67%,crimson 0 ,crimson )

Beachten Sie, dass die drei Nullen und die letzte purpurrote Farbe keine Farbskala haben. Das erste Aqua 0, Aqua 33 % bedeutet, dass Aqua 33 % ausmacht, während das zweite Weiß 0, Weiß 67 % ist. Es scheint 67 % auszumachen, aber es beginnt tatsächlich bei 33 %.

Wenn die Position einer Farbmarkierung kleiner als ihre vorherige Position ist, wird die Position der Farbmarkierung auf den Maximalwert der vorherigen Farbmarkierungspositionen gesetzt .

Die zweite 0 steht also für 33 % und die dritte 0 für 67 %. Sie können 0 in einen Wert ändern, der kleiner als diese beiden Werte ist, und der Effekt ist derselbe. Die letzte Farbe wird automatisch ohne Farbskala ausgefüllt. Wenn wir also nur eine Linie zeichnen möchten, kann die Verlaufsfarbe eine transparente Farbe verwenden:

 linear-gradient(white 2px, transparent 0)

Wenn wir jedoch einen sich wiederholenden Effekt erzielen möchten, benötigen wir auch die Zusammenarbeit von Hintergrundgröße . Die Standardhintergrundgröße beträgt 100 % 100 %. Wenn die Größe jedoch definiert ist, entspricht dies der Aufteilung der gesamten Fläche in wiederholte kleine Stücke.

Raster 1:

<br>

 .grid {
            width: 225px;
            height: 225px;
            background: #58a;
            background-image: linear-gradient(white 2px, transparent 0),linear-gradient(90deg,white 2px,transparent 0);
            background-size: 75px 75px, 75px, 75px;
        }

Der erste Farbverlauf teilt 225 Pixel horizontal in Drittel. Dann wird der zweite Farbverlauf vertikal in Drittel geteilt. Dies ist der mit bloßem Auge sichtbare Effekt, tatsächlich ist er jedoch das Ergebnis von neun 75 x 75 Pixel großen Quadraten.

Gitter 2:

<br>

background-image: linear-gradient(white 2px, transparent 0),linear-gradient(90deg,white 2px,transparent 0),linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),linear-gradient(90deg, hsla(0,0%,100%,.3) 1px,transparent 0);
background-size: 75px 75px, 75px 75px,15px 15px,15px 15px;

Dann ist die Implementierung dieses Gitters einfach. Überlagern Sie dann den Farbverlauf und teilen Sie jeweils 75 in 5 15 Sekunden auf. Der Effekt sieht aus wie Keramikfliesen.

Schachbrett

<br>

Aber wie zeichnet man ein Schachbrett? Beachten Sie, dass die Linien nicht durchgehend sind. Wie im Bild oben gezeigt, wissen wir, basierend auf der Idee der Hintergrundgröße oben, dass ein solches Schachbrett aus mehreren solchen Quadraten besteht.

Und diese beiden Quadrate bestehen aus vier Dreiecken. Eine Besonderheit des linearen Farbverlaufs besteht darin, dass in einer Zeile im Hintergrundgrößenbereich nur eine Farbe vorhanden ist .

background-image: linear-gradient(45deg, #bbb 25%, transparent 0),linear-gradient(45deg, transparent 75%,#bbb 0),linear-gradient(45deg, #ffbb33 25%, transparent 0),linear-gradient(45deg, transparent 75%,#ffbb33 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px,15px 15px, 30px 30px;

Beachten Sie, dass auch eine Reihe von Hintergrundpositionen verwendet wird. Die erste #bbb-Farbe nimmt 25 % der 45-Grad-Richtung ein und die zweite #bbb-Farbe belegt die letzte in der 45-Grad-Richtung. Gradrichtung. Wenn Sie das zweite Dreieck in Rot ändern, ist die Position ab 0,0 auf einen Blick klar.

 background-image: linear-gradient(45deg, #bbb 25%, transparent 0),linear-gradient(45deg, transparent 75%,red 0);
 background-size: 30px 30px;
 background-position: 0 0, 0px 0px,15px 15px, 30px 30px;

Ändern Sie die Position des roten Dreiecks auf 15 Pixel, und 15 Pixel bilden ein Quadrat. Überlagern Sie auf die gleiche Weise ein Quadrat, um das Schachbrettformat zu erhalten. Auf die gleiche Weise können wir ein Ruhegitter zusammenstellen.

Lassen Sie das Dreieck jedes Mal um 90 Grad drehen, ohne seine Position zu verändern.

background-image: linear-gradient(45deg, red 0, red 25%,transparent 0), linear-gradient(135deg, orange 0, orange 25%,transparent 0),linear-gradient(225deg, yellow 0, yellow 25%,transparent 0),linear-gradient(315deg, green 0, green 25%,transparent 0)

<br>

Schräges Gitter

Mit der obigen Akkumulation ist das Zeichnen eines schrägen Gitters einfach:

 background-image: linear-gradient(45deg,transparent 49% ,black 0,black 51% ,transparent 0), linear-gradient(135deg,transparent 49% ,black 0,black 51% ,transparent 0);
 background-size: 30px 30px;

相当于是每个单元就渐变了两条斜线。

斜格子

一直去拼这种单元可能让你有点烦，于是出来了repeating-linear-gradient。

background: repeating-linear-gradient( 45deg, transparent, transparent 1em, moccasin 0, moccasin 2em, transparent 0, transparent 3em, powderblue 0, powderblue 4em, transparent 0, transparent 5em, lavender 0, lavender 6em, transparent 0, transparent 7em, beige 0, beige 8em), repeating-linear-gradient( -45deg, transparent, transparent 1em, khaki 0, khaki 2em, transparent 0, transparent 3em, beige 0, beige 4em, transparent 0, transparent 5em, peachpuff 0, peachpuff 6em );

注意到颜色都是成对出现。这样才会出现我们的色条。注意这里使用了background-blend-mode: multiply; 混合模式。不然效果没有这么好看。

圆点:

思路和上面一样，使用径向渐变叠加和错位

 background-image:radial-gradient(#fff 5px,transparent 0),radial-gradient(#fff 10px, transparent 0);
 background-size: 40px;
 background-position: 0 0, 20px 20px;

沙发

沙发这个效果比较复杂，使用了径向渐变制作圆点和阴影，线性渐变勾勒出线条。

 background:
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
                radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
                radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
                radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
                radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
                radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
                radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
                radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
　　　　　　　　  linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
                linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0
                ;
background-color: #300; 
background-size: 100px 100px;

radial-gradient语法：

radial-gradient(
  [ [ circle || <length> ]                         [ at <position> ]? , |
    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |
    at <position> ,
  ]?
  <color-stop> [ , <color-stop> ]+
)

看上去有点复杂，[]表示一个参数，[]?表示这个参数可选，| 表示这两个参数二选一，||表示这两个参数可以同时存在，'，'号表示这个参数结束。包含形状，中心点位置，扩展关键字和颜色。形状分圆形(circle)和椭圆(ellipse)，位置可以是长度/百分比/简写的left、center等。颜色和线性渐变一样，比如渐变一个太阳：

 background:radial-gradient(at 45px 45px,rgb(248, 242, 209),gold,#FFF);

<br>

不过这里的at不仅影响着渐变的中心点而且还影响着渐变的形状。 如果加上background-size我们可以得到一块饼干：想吃么 (*^^*) ……

而扩展关键字主要有下面几种情况

closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边

background:radial-gradient(circle closest-side ,aqua,gold);

closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角

 background:radial-gradient(circle closest-corner  ,aqua,gold);

farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边

 background:radial-gradient(circle farthest-side at 30% 30%  ,aqua,gold);

farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角

 background:radial-gradient(circle farthest-corner at 30% 30%  ,aqua,gold);

 如果我们想画出色圈呢，这就要用到线性渐变中的技巧。

background:radial-gradient(white 0,white 10%,red 0, red 20%,white 0,white 30%,red 0,red 40%,white 0,white 50%,red 0,red 60%,white 0,white 100%);

小结：这些效果还是蛮有意思的，这一篇主要是学习了 linear-gradient，repeating-linear-gradient以及background-size、background-position来实现网格效果，最后还用到了radial-gradient，径向渐变的花样更多，所有的效果基本都是基于渐变叠加和重复，更多的效果可以参考下面的链接。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery、Angular、node中的Promise详解<br>

H5的视频播放库video.js详解<br>

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Farbverlauf von ss3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!