Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Was ist neu in CSS3?

藏色散人
Freigeben: 2023-01-04 09:36:29
Original
3362 Leute haben es durchsucht

Zu den neuen Inhalten von CSS3 gehören: 1. Untergeordneter Selektor, der zum Auswählen von Elementen mit einem bestimmten übergeordneten Element verwendet wird; 2. Geschwisterselektor, der zum Auswählen von Geschwisterelementen direkt nach einem anderen Element verwendet wird; 4. Klassenselektor; 5. Pseudoelementselektor usw.

Was ist neu in CSS3?

Die Betriebsumgebung dieses Artikels: Windows7-System, CSS3-Version, DELL G3-Computer.

Neuer Inhalt in CSS3:

Neuer Selektor in CSS3
Untergeordneter Selektor
Der untergeordnete Selektor wird verwendet, um Elemente mit einem bestimmten übergeordneten Element auszuwählen

.box > p{
  background-color: pink}
Nach dem Login kopieren

Bruder Selector
Benachbarter Geschwisterselektor: Wird verwendet, um Geschwisterelemente unmittelbar nach einem anderen Element auszuwählen, und beide haben das gleiche übergeordnete Element

h1 + p{
  margin-top:50px;    满足h1相邻的p标签  }
Nach dem Login kopieren

Andere Geschwisterselektoren
Stimmen mit demselben übergeordneten Element überein Alle Element2-Elemente nach Element1 haben die beiden Elemente das gleiche übergeordnete Element

h2 ~ p{
  background: ff0000;   和h2同级的其他选择器}
Nach dem Login kopieren

struktureller Pseudoklassenselektor
nth-child(n): n kann eine Zahl, ein Schlüsselwort und eine Formel sein
Gemeinsames Schlüsselwort gerade: gerade Zahl, ungerade: ungerade

Pseudoelemente können nur zu Doppel-Tags hinzugefügt werden. Der Attributinhalt:""; vor und nach dem Erstellen eines Elements stehen, das ein Inline-Element ist Funktion e::before
Selektor Funktion
e: erstes untergeordnetes Element entspricht dem übergeordneten Element und dem ersten untergeordneten Element e
e: letztes untergeordnetes Element entspricht dem übergeordneten Element. Das letzte e-Element im Element
e:n-tes untergeordnetes Element (n) stimmt mit dem n-ten untergeordneten Element e im übergeordneten Element überein letztes
vom Typ e Neue Pseudoelemente werden hinzugefügt. Doppelpunkte sind h5-Syntaxspezifikationen muss sein In den Pseudoelementen geschrieben. Der Doppelpunkt des Pseudoelements. Es dürfen keine Leerzeichen vor
Selektor
Ein Element vor dem E-Element einfügen


e::after

Ein Element nach dem E-Element einfügen

e:first-letterDer erste Buchstabe im E-Container wird ausgewählte::first-lineSelected Die erste Textzeile im E-ContainerAttribute-Selektor
 input[name]{  选择input中带有name属性的选择器    width:30px;
    height:30px;
  }
  input[type="checkbox"]{  选择input中type="checkbox"属性的选择器    width:30px;
    height:30px;
  }
  input[type^="check"]{  包含input中type="check"开头属性的选择器    width:30px;
    height:30px;
  }
  input[class&="check"]{  包含input中class="box"结尾属性的选择器    width:30px;
    height:30px;
  }
   input[class*="eck"]{  包含input中含有class="eck"属性的选择器    width:30px;
    height:30px;
Nach dem Login kopieren
Neue Selektorgewichtung Die Gewichtung von Pseudoklassenselektor und Attributselektor ist gleich zum Gewicht des Klassenselektors Das Gewicht des Pseudoelementselektors Entspricht dem EtikettenselektorContent-Box-Standardmodus Die Boxgröße ist Breite und Höhe, Abstand und Rand hinzufügen, der Inhaltsbereich wird verkleinert Randradius
CSS3-Boxmodell CSS3 kann das Boxmodell durch Boxgröße spezifizieren, sodass wir festlegen können, wie die Gesamtbreite und die Gesamtsumme berechnet werden Höhe eines Elements
Die Gesamtgröße der Box ist Breite + Abstand + Rand, der Inhaltsbereich ist der Breiten- und HöhenteilRandbox-Seltsamer Modus
Legen Sie den Kreis des Randes fest Ecke

border-radius: 100px/50px   分别设置水平方向和垂直方向半径border-bottom-right-radius: 50px; 单一属性设置右下角设置
Nach dem Login kopieren
Textschatten Textschatten

Horizontaler Schatten, vertikaler Schatten, Unschärfeabstand und Schattenfarbe können über angegeben werden Attributwerte ​​​​ Textschatten Textschatten Horizontaler Schatten, vertikaler Schatten, Unschärfeabstand und Schatten können über Attributwerte angegeben werden Schattenfarbe


Attributwert

Funktion

h-Shadow Erforderliche, horizontale Schattenposition

文字阴影:水平位置 垂直位置 模糊程度 颜色text-shadow: 10px 20px 5px #f00;
Nach dem Login kopieren

Multi- Ebenenschatten: Der erste geschriebene Schatten wird dem letzten geschriebenen Schatten überlagert -Schatten

erforderlich, horizontale Schattenposition


V-Schatten

erforderlich, vertikale Schattenposition

Unschärfe Unscharfer AbstandSpreizungDie Größe des SchattensFarbeDie Farbe des SchattensEinsatzäußerer Schatten hat sich in inneren Schatten geändert
边框阴影:水平位置 垂直位置 模糊程度 拓展大小 颜色 是否内边框阴影box-shadow: 20px 20px 5px 20px #f00 inset;
Nach dem Login kopieren

过渡属性transition
transition: 过渡属性 过渡时间 运动曲线 延时时间;

属性值作用
transition简写属性,用于在一个属性中设置其他4个过渡属性
transition-property规定应用过渡的css属性的名称
transition-duration定义过渡效果花费的时间,默认是0
transition-timing-function规定过渡效果的时间曲线,默认是ease
transition-delay规定过渡效果何时开始。默认是0

transition-property过渡的属性
none表示没有属性过渡
all表示所有变化的属性都过渡
属性名:使用具体的属性名,多个属性名之间逗号分隔
transition-timing-function 时间曲线
Was ist neu in CSS3?

.box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    transition: all 2s linear 0s;     过渡属性的使用(动画效果)  }
  .box:hover{
    width: 500px;
  }
Nach dem Login kopieren

2D转换-transform
移动translate()

作用:对元素进行移动、缩放、转动、拉长、拉伸,配合过渡效果实现动画效果
Was ist neu in CSS3?

transform: translate(10px,10px);
Nach dem Login kopieren

缩放scale()
transform的属性值为scale()可以实现缩放效果
scale为1以上为放大效果,为0到1之间缩放
Was ist neu in CSS3?
旋转rotate()
实现元素旋转
元素旋转后,坐标轴也会发生改变
正数表示顺时针旋转,负数表示逆时针旋转

transform: rotate(30deg);
Nach dem Login kopieren

倾斜skew()
设置skew(),实现元素倾斜
书写语法:transform:skew(数字deg,数字deg);
transform-origin 属性
设置调整元素的水平和垂直方向原点位置,调整元素基准点
x:定义X轴的原点,可能的值:left、center、right、像素值、百分比
y:定义y轴的原点,可能的值:left、center、right、像素值、百分比

transform-origin: left top;   以左上角为基准点
Nach dem Login kopieren

3D转换
透视perspective
透视可以将一个2D平面在转换过程中呈现3D效果
作用:设置在Z轴的视线焦点的观察位置,从而实现3D效果
属性值:像素值,数值越大,观察点距离z轴原点越远
3D旋转
Was ist neu in CSS3?
3D位移
加粗样式属性值为像素或者百分比
Was ist neu in CSS3?
transform-style属性
用于设置被嵌套的子元素在父元素的3D空间中显示,子元素会保留自己的3D转换坐标轴
属性值:flat:所有子元素在2D平面呈现,preserve-3d:保留3D空间

transform-style: preserve-3d;
Nach dem Login kopieren

浏览器兼容
internet Explorer10、Firefox以及Opera支持transform属性
Chrome 和 Safari需要前缀-webkit-
internet Explorer9 需要前缀-ms-

动画
css3中提供了自己的动画制作方法
css3动画制作分为两步,创建动画、制作动画

animation属性
需要将@keyframes中创建的动画捆绑到某个选择器,否则不会产生动画效果
animation属性用于对动画进行捆绑
语法:animation:动画名称 过渡时间 速度曲线 动画次数 延时时间

小球运动动画代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: 200px auto;
      background-color: skyblue;
      /* 添加绑定动画 */
      animation: move1 2s linear infinite;
    }
    /* 开头和结尾定义动画效果 */
    @keyframes move{
      from{
        transform: translateY(0);
      }
      to{
        transform: translateY(150px);
      }
    }
    @keyframes move1{
      0%{
        transform: translateY(0);
      }
      25%{
        transform: translateY(200px);
      }
      50%{
        transform: translateY(0);
      }
      75%{
        transform: translateY(-200px);
      }
      100%{
        transform: translateY(0);
      }
    }
  </style>
</head>
<body>
  <p class="box">
  </p>
</body>
</html>
Nach dem Login kopieren

               

Das obige ist der detaillierte Inhalt vonWas ist neu in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!