Heim >Web-Frontend >CSS-Tutorial >Animation zum Laden von CSS3-Lernseiten (5)
Animation zum Laden von CSS3-Lernseiten (5)
- 青灯夜游nach vorne
- 2018-10-15 16:36:132254Durchsuche
Ich habe bereits vier Artikel mit 22 Effekten gepostet. In diesem Artikel werde ich Ihnen 6 Arten von CSS3-Seitenladeanimationen vorstellen, also insgesamt 28 Seitenladeanimationen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Im vorherigen Artikel [Animation zum Laden von CSS3-Lernseiten (4) ] habe ich 6 weitere CSS3-Ladeanimationen geteilt, und ich werde sie auch heute weiter teilen (der Titel setzt den vorherigen fort). Zeit).
Dreiundzwanzig, Wirkung dreiundzwanzig
Zwei Quadrate werden zunächst nach oben links positioniert (oben: 0; links: 0;);
Eine vollständige Bewegung ist in vier Phasen unterteilt: In der ersten Phase bewegt sich die obere linke Seite nach oben rechts und dreht sich um 90°, in der zweiten Stufe wird die obere rechte Seite nach unten verschoben, um 180° gedreht und in der dritten Stufe wird die untere rechte Seite wiederhergestellt Nach links unten verschoben, um 270 ° gedreht und in der vierten Stufe die Breite und Höhe verringert. Nach links oben verschieben, um 360 ° drehen und die Breite und Höhe wiederherstellen.
Die Zeitdifferenz der Animationsverzögerung ist eine negative halbe Animationszeit.
{animation: party_ball 2s ease infinite;}
@keyframes party_ball {
25% {
-webkit-transform: scale(.5) rotateZ(90deg);
transform: scale(.5) rotateZ(90deg);
top: 0;
left: 100%;
}
50% {
-webkit-transform: scale(1) rotateZ(180deg);
transform: scale(1) rotateZ(180deg);
top: 100%;
left: 100%;
}
75% {
-webkit-transform: scale(.5) rotateZ(270deg);
transform: scale(.5) rotateZ(270deg);
top: 100%;
left: 0;
}
100% {
-webkit-transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
top: 0;
left: 0;
}
}
Vierundzwanzig, Wirkung vierundzwanzig
Ähnlich wie beim Schlageffekt einer Flamme positionieren Sie die drei quadratischen Ps horizontal in der Mitte und vertikal unten und stellen Sie die anfängliche Breite und Höhe auf 0 ein.
Während Sie sich nach oben bewegen, ändern Sie die Breite und Höhe des Quadrats.
{animation: fire_ball 1.5s linear infinite;}@keyframes fire_ball {
50% {
height: 30px;
width: 30px;
top: 50%;
}
100% {
height: 0;
width: 0;
top: 0;
}
}
Fünfundzwanzig, Wirkung fünfundzwanzig
Es ist dem Spiel, das ich als Kind gespielt habe, sehr ähnlich – Pac-Man
Die Produktion von Pac-Man auf der linken Seite: Die Breite und Höhe der beiden Ps sind 0, nur die Der Rand ist festgelegt und das Farbattribut des rechten Rands ist auf transparent eingestellt. Der Code und der Effekt lauten wie folgt:
.pac_head {
border: 25px solid #fff;
border-right-color: transparent;
border-radius: 50%;
}
Pac-Mans Mund wurde erstellt Die verbleibenden zwei Ps sind eine Vorwärtsdrehung der Z-Achse und eine Rückwärtsdrehung der Z-Achse. Die Achse dreht sich und der Fressvorgang wird ausgeführt.
Die drei kleinen Bälle auf der rechten Seite sind alle so eingestellt, dass sie sich in die Mitte der rechten Seite bewegen und sich auf Pac-Mans Mund zubewegen. Passen Sie einfach die Animationszeit der Bälle und Pac-Man entsprechend an.
@keyframes pac_ball {
100% {
right: 55%;
}
}
Sechsundzwanzig, Wirkung sechsundzwanzig
Springendes Papier
Die Schwierigkeit dieses Effekts liegt darin, wie man den Effekt des Fallens und der Verformung erzeugt. Es ist eigentlich ganz einfach. Zunächst müssen Sie verstehen, dass ein Quadrat, solange es um ein Vielfaches von 90 um die Z-Achse gedreht wird, genau so aussieht wie das Originalbild. Dann ist es sehr einfach, diesen Effekt zu erzeugen Sie müssen in Betracht ziehen, jeder Ecke einen Verformungseffekt hinzuzufügen.
Verformungseffekt: Ändern Sie einfach den Wert des Randradius, um diese Art von Verformung zu erzeugen.
@keyframes beat_ball {
25% {
transform: translateY(25%) rotate(22.5deg);//下落
border-bottom-right-radius: 10%;
}
50% {
border-bottom-right-radius: 100%;
transform: translateY(50%) scale(1, 0.8) rotate(45deg) //scale，是为了让形变看起来有弹性 }
75% {
transform: translateY(25%) rotate(67.5deg) //上升 }
100% {
transform: translateY(0) rotate(90deg) //旋转90°结束一个周期，刚好和初始状态一模一样，那就直接重复执行动画即可 }
}
Der Schatteneffekt ist noch besser. Erstellen Sie eine flache Ellipse, einen Kastenschatten und fügen Sie bei Bedarf einfach die Größe hinzu.
@keyframes beat_shadow {
50%{
transform: scale(1.25,0.8);
}
}
Siebenundzwanzig, Effekt siebenundzwanzig
A p, eine Pseudoklasse wird erstellt.
p ist für die Rotation verantwortlich und die Pseudoklasse ist für die Änderung der Höhe verantwortlich. Jeder erfüllt seine Aufgaben.
@keyframes locker_ball { //p旋转
25%{
transform: rotateZ(180deg);
}
50%{
transform: rotateZ(180deg);
}
75%{
transform: rotateZ(360deg);
}
100%{
transform: rotateZ(360deg);
}
}
@keyframes locker_ballh { //伪类高度改变
25%{
height: 40px;
}
50%{
height: 0;
}
75%{
height: 0;
}
100%{
height: 40px;
}
}
Achtundzwanzig, Wirkung achtundzwanzig
Der Effekt der Uhr (meine Positionierung scheint nicht in der Mitte zu sein)
Der Effekt der Uhr kann mit nur einer Keyframe-Animation erreicht werden, die darin besteht, sich um 360° zu drehen, einfach zu ändern Die Position der beiden Zeiger Die Animationsbewegungszeit ist ausreichend.
@keyframes clock {
100%{
transform: rotateZ(360deg);
}
}
In dieser Animationsserie werden einige Pauseneffekte durch Keyframe-Steuerung erreicht, um den Zustand von einem bestimmten Prozentsatz bis zu einem bestimmten Prozentsatz beizubehalten, während andere durch die Bewegungskurven-Entlastung erreicht werden.
Fertig mit dem Verteilen der Blumen! Ich hoffe, dass diese Serie für alle beim Lernen hilfreich sein kann. Weitere verwandte Tutorials finden Sie unter CSS-Basis-Video-Tutorial , CSS3-Video-Tutorial , Bootstrap-Tutorial !
Das obige ist der detaillierte Inhalt vonAnimation zum Laden von CSS3-Lernseiten (5). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!