Zusammenfassung der Formen über neue Funktionen von CSS3

CSS3 ist eine aktualisierte Version von CSS, die auch viele neue Funktionen bietet. Ich hoffe, dass dieser Artikel eine Zusammenfassung der neuen Funktionen von CSS3 darstellt es kann jedem helfen.

1. Adaptive Ellipse

Randradiusfunktion:

• Sie können die horizontalen und vertikalen Radien separat angeben Der Wert kann ein Prozentsatz sein. Verwenden Sie einfach / (Schrägstrich), um die beiden Werte zu trennen (eine Ellipse mit adaptiver Breite kann implementiert werden).

• Sie können auch vier horizontale und vertikale Radien mit unterschiedlichen Winkeln angeben (Halbellipse kann realisiert werden)

• Viertelellipse, hauptsächlich Is to Passen Sie den horizontalen und vertikalen Radius an

Beispielcode:

.wrap{
            border-radius: 50% / 30%;
            width: 60px;
            height: 80px;
            background: yellow;
        }
        .wrap02{
            width: 60px;
            height: 80px;
            background: yellow;
            border-radius: 50% / 100% 100% 0 0;
        }
        .wrap03{
            width: 60px;
            height: 80px;
            background: yellow;
            border-radius: 100% 0 0 0;
        }

2. Das flache Viereck

• muss auf den SkewX der Transformation zur Verzerrung angewendet werden

• Das Hauptproblem besteht darin, dass Der Container wird zu einem flachen Viereck, und der Text und die Elemente im Inneren werden vertikal angezeigt, und die verschachtelten Elemente werden vertikal angezeigt. Die internen Elemente können durch Schrägstellung umgekehrt gedreht werden. Verschachtelte innere Elemente müssen blockartig sein, da die Transformation nicht auf Inline-Elemente angewendet werden kann.

• Verwenden Sie Pseudoelemente zur Verzerrung (:before)

.wrap{
            width: 80px;
            height: 40px;
            transform: skewX(-45deg);
            background: yellow;
        }
        .wrap>p{
            transform: skewX(45deg); 
        }
        .btn{
            position: relative;
            padding: 10px;
        }
        .btn:before{
            content: '';
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            z-index: -1;
            background: #85a;
            transform: skewX(-45deg);
        }

3. Raute

Wenden Sie die Verschachtelung von Elementen an, und die äußeren und inneren Elemente drehen sich miteinander, um eine zu erreichen achteckige Form ;

• Gestalten Sie die maximale Breite des internen Elements so, dass das gesamte Bild nur das gesamte äußere p ausfüllen kann 🎜>

  Das Scale-Attribut steuert die Vergrößerung seines Bildes. Standardmäßig ist der Mittelpunkt der Ursprung der Vergrößerung (es wird der Satz des Pythagoras verwendet, geben Sie keinen zusätzlichen Transformationsursprung an).

4. Eckenschneideffekt

.wrap{
            width: 200px;
            transform: rotate(-45deg);
            overflow: hidden;
        }
        .wrap > img{
            transform: rotate(45deg) scale(1.42); 
            max-width: 100%;
        }

Mit Linear-Gradient können Sie Winkel, Mehrwert und Verlaufstransparenz festlegen, um dies zu erreichen.

Sie müssen auch auf die Einstellungen der Attribute „Hintergrundgröße“ und „Hintergrundwiederholung“ achten, um zu verhindern, dass überlappende Hintergründe dazu führen, dass der Effekt nicht wirksam wird

Sie können „Border-Image“ verwenden, um Ecken zu schneiden und den Wert von „Border-Image“ festzulegen -slice (der Bildrand ist nach innen versetzt);

.wrap{
            width: 200px;
            height: 100px;
            background: #58a;
            background: linear-gradient(-135deg, transparent 15px, #58a 0px) top right,
            linear-gradient(135deg,transparent 15px, #655 0px) top left,
            linear-gradient(-45deg, transparent 15px, #58a 0px) bottom right, 
            linear-gradient(45deg, transparent 15px, #655 0px) bottom left;
            background-size: 50% 50%;
            background-repeat: no-repeat;
        }

border-image verwendet SVG, um Bilder zu erstellen

• border legt Breite + Transparenz fest, plus border-image-slice wird nach innen versetzt. Dadurch wird ein Rand ausgeschnitten.

• background-clip: Auf padding-box setzen, sonst reicht der Hintergrund bis zum Rand.

• Andere Lösungen

Nutzung des Clip-Path-Attributs, aber nicht vollständig unterstützt

.wrapSvg{
            border:15px solid transparent;
            border-image: 1 url(&#39;data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a"><polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/></svg>&#39;);
            margin-top: 50px;
            width: 200px;
            height: 100px; 
            background: #58a;
            background-clip: padding-box;
        }

css4 gibt direkt das Eckpfadattribut an, um das Eckenschneiden zu unterstützen

5. Trapezmuster

• Verstehen Sie die Grundprinzipien der Transformation

a und d stellen die Skalierung dar und können nicht 0 sein; e und f steuern die Verschiebung

Übersetzen (Verschiebung): Matrix(1,0,0,1,x,y)

Skalierung (Zoom): Matrix(x,0,0, y ,0,0);

• skew (skew): Matrix(1,tany,tanx,1,0,0), da die Eingabe Grad (Winkel) ist, der Winkel muss in Bogenmaß umgewandelt werden

• drehen (Rotation): Matrix(cosN,sinN,-sinN,cosN,0,0), Winkel in Bogenmaß umgewandelt

• Die Anwendung der oben genannten Werte hängt mit dem Wert von transform-origin zusammen, der der Ursprung der Drehung des Positionierungselements ist, der oben, unten, in der Mitte usw. liegen kann. Drei Koordinatensysteme von x, y und z können angegeben werden
• Perspektive: Perspektive, es kann nicht negativ sein, 0 oder Prozentsatz, es kann nur ein numerischer Wert sein

stellt a dar; Abstand vom Beobachter zum beobachteten Objekt

Je weiter der perspektivische Abstand vom Objekt ist, desto kleiner erscheint das Objekt

• Perspektive kann Nur für das übergeordnete Element oder den Vorfahren des verformten Elements festgelegt werden, da der Browser dies tut. Die Verformung erzeugt einen perspektivischen Effekt.

• Bei der 3D-Transformation gibt es kein Skew-Attribut.

• 6. Einfaches Kreisdiagramm

Animiertes Kreisdiagramm, der Effekt ist wie folgt:

Die Umsetzungsschritte sind wie folgt:

画出一个yellowgreen的圆，并利用linear-gradient设置background-image的值，实现两种颜色各显示一半的功能：

然后加入一个伪元素，继承父级（真实元素）的背景色，然后用rotate旋转即可

• 要利用margin-left让其靠左

• 利用transform-origin设置其旋转定位点

动画展示代码如下：

@keyframes spin{
            to{ transform: rotate(.5turn); }
        }
        @keyframes bg{
            50%{ background-color: #655; }
        }
        .wrap{
            width: 100px; height: 100px;
            border-radius: 50%;
            background: yellowgreen;
            background-image: linear-gradient(to right, transparent 50%, #655 0); 
        } 
        .wrap::before{
            content: '';
            display: block;
            margin-left: 50%;
            background-color: inherit;
            height: 100%; 
            border-radius: 0 100% 100% 0 / 50%;
            transform-origin: left;
            animation:spin 3s linear infinite,
                bg 6s step-end infinite;
        }

相关推荐：

关于图形形状的文章推荐

仅用CSS 创建各种不同的图形形状

使用CSS创建各种不同的图形形状的方法

Das obige ist der detaillierte Inhalt vonZusammenfassung der Formen über neue Funktionen von CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!