Résumé des formes sur les nouvelles fonctionnalités de CSS3-tutoriel CSS-php.cn

Résumé des formes sur les nouvelles fonctionnalités de CSS3

小云云

Libérer： 2017-12-22 16:53:49

original

1580 Les gens l'ont consulté

CSS3 est une version améliorée de CSS, qui comporte également de nombreuses nouvelles fonctionnalités. Cet article présente principalement le résumé des nouvelles fonctionnalités de CSS3. Il est d'une grande valeur pratique. J'espère que les amis qui en ont besoin pourront s'y référer. cela peut aider tout le monde.

1. Ellipse adaptative

Fonction de rayon de bordure :

Vous pouvez spécifier les rayons horizontal et vertical séparément, et la valeur Il peut s'agir d'un pourcentage, utilisez simplement / (barre oblique) pour séparer les deux valeurs (une ellipse de largeur adaptative peut être implémentée).
Vous pouvez également spécifier quatre rayons horizontaux et verticaux avec des angles différents (une demi-ellipse peut être réalisée)
Quart d'ellipse, principalement pour ajustez le rayon horizontal et vertical

Exemple de code :

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

Copier après la connexion

2. Le quadrilatère plat

doit être appliqué au skewX de la transformation pour la distorsion
Le problème principal est que le Le conteneur devient un quadrilatère plat et l'intérieur. Le texte et les éléments sont affichés verticalement et les
éléments imbriqués sont affichés verticalement. Les éléments internes peuvent être tordus à l'envers en utilisant l'inclinaison. Les éléments internes imbriqués doivent être bloqués car la transformation ne peut pas être appliquée aux éléments en ligne.
Utiliser des pseudo-éléments pour la distorsion (:avant)

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

Copier après la connexion

3. Losange

Appliquez l'imbrication des éléments, et les éléments extérieurs et intérieurs tournent les uns avec les autres pour obtenir un forme octogonale
Concevez la largeur maximale de l'élément interne pour qu'elle soit de 100 %, de sorte que l'image entière ne puisse remplir que tout le p extérieur
L'attribut scale contrôle le grossissement de son image Par défaut, le point central est l'origine du grossissement (le théorème de Pythagore sera utilisé, ne spécifiez pas d'origine de transformation supplémentaire).

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

Copier après la connexion

4. Effet de coupe de coin

En utilisant le dégradé linéaire, vous pouvez définir l'angle, les valeurs multiples et la transparence du dégradé pour y parvenir.
Vous devez également faire attention aux paramètres des attributs background-size et background-repeat pour éviter que les arrière-plans qui se chevauchent n'empêchent l'effet de prendre effet

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

Copier après la connexion

Vous pouvez utiliser border-image pour réaliser une coupe de coin et définir la valeur de border-image -slice (la bordure de l'image est décalée vers l'intérieur) ;
border-image utilise svg pour créer des images
la bordure définit la largeur + la transparence, plus border-image-slice est décalé vers l'intérieur Cela crée une bordure coupée
background-clip : défini sur padding-box, sinon l'arrière-plan s'étendra jusqu'à la bordure.

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

Copier après la connexion

Autres solutions

Exploitation de l'attribut clip-path, mais pas entièrement pris en charge
css4 donnera directement l'attribut corner-path pour prendre en charge la coupe de coin

5. 🎜>Comprendre les principes de base de la transformation

a et d représentent la mise à l'échelle et ne peuvent pas être 0 ; c et b contrôlent l'inclinaison ; e et f contrôlent le déplacement

traduire (déplacement) : matrice(1,0,0,1,x,y)

échelle (zoom) : matrice(x,0,0, y ,0,0);
skew (skew): matrice(1,tany,tanx,1,0,0), puisque l'entrée est deg (angle), l'angle doit être Convertir en valeur radian
rotation (rotation) : matrice (cosN, sinN,-sinN,cosN,0,0), angle converti en radian
L'application des valeurs ci-dessus est liée à la valeur de transform-origin, qui est l'origine de la rotation de l'élément de positionnement, qui peut être haut, bas, centre, etc. Trois systèmes de coordonnées de x, y et z peuvent être spécifiés

perspective : Perspective, elle ne peut pas être négative, 0 ou pourcentage, elle ne peut être qu'une valeur numérique

représente un ; distance de l'observateur à l'objet observé

Plus la distance de perspective est éloignée de l'objet, plus l'objet apparaîtra petit
La perspective peut ne doit être défini que sur le parent ou l'ancêtre de l'élément déformé, car le navigateur produira un effet de perspective
Il n'y a pas d'attribut d'inclinaison dans la transformation 3D.

6. Diagramme circulaire simple

Diagramme circulaire animé, l'effet est le suivant :

Les étapes de mise en œuvre sont les suivantes :

画出一个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: &#39;&#39;;
            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;
        }

Copier après la connexion