Heim  >  Artikel  >  Web-Frontend  >  Grafische Komposition von CSS3.0

Grafische Komposition von CSS3.0

不言
不言Original
2018-06-28 14:45:241625Durchsuche

Dieser Artikel stellt hauptsächlich den grafischen Aufbau von CSS3.0 vor, der einen gewissen Referenzwert hat. Jetzt kann ich ihn mit allen teilen. Freunde in Not können sich darauf beziehen.

Das Aufkommen von CSS3.0 hat uns gebracht Der Hauptwissenspunkt dieses Artikels ist die Anwendung von Transformationsattributen/Animationen. Ich hoffe, dass sie Ihnen beim Erlernen der grafischen Komposition hilfreich sein werden

Hauptwissenspunkte

① Transformationsattribut: Ratate (Rotationsgrad)
Scale (gleiche Skalierung)
Skew(x, y); lässt das Element geneigt erscheinen, einschließlich zwei Parameterwerte, die X bzw. den Neigungswinkel zwischen der Achse und der Y-Achse darstellen. Wenn der zweite Parameter leer ist, ist er standardmäßig 0. Ein negativer Parameter bedeutet eine Neigung in die entgegengesetzte Richtung.
②animate eignet sich zum Generieren von Breite, Höhe, links, oben usw. Beispielübergang: 1s erleichtern alle Ereignisse;

p { 
-webkit-animation-name: pulse; 
-webkit-animation-duration: 2s; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: ease-in-out; 
-webkit-animation-direction: alternate; 
}@-webkit-keyframes pulse { 
from { 
opacity: 0.0; 
font-size: 100%; 
} 
to { 
opacity: 1.0; 
font-size: 200%; 
} 
}style 
*{ margin: 0; padding: 0;} 
body { 
overflow: hidden; 
} 
#clouds{ 
background:-webkit-linear-gradient(top,#c9dbe9 0%,#fff 100%);/*等价于background:-webkit-gradient(linear,left top,left bottom,from(c9dbe9),to(#fff))*/ 
background:-moz-linear-gradient(top,#c9dbe9 0%,#fff 100%); 
background:-o-linear-gradient(top,#c9dbe9 0%,#fff 100%); 
padding:100px 0px; 
} 
.cloud{ 
width:200px; 
height:60px; 
background:#FFF; 
border-radius:200px; 
-webkit-border-radius:200px; 
-moz-border-radius:200px; 
-o-border-radius:200px; 
position:relative;} 
.cloud:after,.cloud:before{ 
content:''; 
position:absolute; 
background:#FFF; 
width:100px; 
height:80px; 
top:-15px; 
left:10px; 
border-radius:100px; 
-webkit-border-radius:100px; 
-moz-border-radius:100px; 
-o-border-radius:100px;} 
.cloud:after{ 
width:120px; 
height:120px; 
top:-55px; 
left:auto; 
right:15px;} 
.x1{ 
-webkit-animation:moveclouds 25s linear infinite; 
-moz-animation:moveclouds 25s linear infinite; 
-o-animation:moveclouds 25s linear infinite;} 
.x2{ 
left:200px; 
transform:scale(0.6); 
-webkit-transform:scale(0.6); 
-moz-transform:scale(0.6); 
-o-transform:scale(0.6); 
opacity:0.6; 
animation:moveclouds 25s linear infinite; 
-webkit-animation:moveclouds 25s linear infinite; 
-moz-animation:moveclouds 25s linear infinite; 
-o-animation:moveclouds 25s linear infinite;} 
.x3{ 
top:-200px; 
left:-250px; 
transform:scale(0.6); 
-webkit-transform:scale(0.6); 
-moz-transform:scale(0.6); 
-o-transform:scale(0.6); 
opacity:0.6; 
animation:moveclouds 25s linear infinite; 
-webkit-animation:moveclouds 25s linear infinite; 
-moz-animation:moveclouds 25s linear infinite; 
-o-animation:moveclouds 25s linear infinite;} 
.x4{ 
top:200px; 
left:470px; 
transform:scale(0.6); 
-webkit-transform:scale(0.6); 
-moz-transform:scale(0.6); 
-o-transform:scale(0.6); 
opacity:0.6; 
animation:moveclouds 25s linear infinite; 
-webkit-animation:moveclouds 25s linear infinite; 
-moz-animation:moveclouds 25s linear infinite; 
-o-animation:moveclouds 25s linear infinite;} 
.x5{ 
left:470px; 
top:-250px; 
transform:scale(0.8); 
-webkit-transform:scale(0.8); 
-moz-transform:scale(0.8); 
-o-transform:scale(0.8); 
opacity:0.8; 
animation:moveclouds 25s linear infinite; 
-webkit-animation:moveclouds 18s linear infinite; 
-moz-animation:moveclouds 18s linear infinite; 
-o-animation:moveclouds 18s linear infinite;} 
@-webkit-keyframes moveclouds{ 
0%{margin-left:1000px;} 
100%{margin-left:-1000px;} 
} 
@-moz-keyframes moveclouds{ 
0%{margin-left:1000px;} 
100%{margin-left:-1000px;} 
}
@-o-keyframes moveclouds{ 
0%{margin-left:1000px;} 
100%{margin-left:-1000px;} 
} 
html 
<p id="clouds"> 
  <p class="cloud x1"></p> 
  <p class="cloud x2"></p> 
  <p class="cloud x3"></p> 
  <p class="cloud x4"></p> 
  <p class="cloud x5"></p> 
</p>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.


Verwandte Empfehlungen:

Einführung in die Verwendung des Übergangsanimationsattributs in CSS3


CSS zur Web-Realisierung Seitenhintergrundverlauf Vier Codeeinstellungen


Das obige ist der detaillierte Inhalt vonGrafische Komposition von CSS3.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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