Forum - RE: Css Animation

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten � Css Animation - Laufende Grafik

Seite 2 von 3 � Seite 1 2 3 Seite �

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#11 | RE: Css Animation datum

15.12.2023 15:42 (zuletzt bearbeitet: 15.12.2023 15:44)

Kipper-Spedition

Informationen anzeigen

Beitr�ge:	176
Registriert seit:	09.10.2022

Homepage:	Link
Letzte Spende	Betrag 10 � Forum Spende
Sternzeichen	Stier
Likes	122

Zitat von Daishi im Beitrag #4

Hallo Nara ich habe es mal angepasst, hoffe, es ist so ok.

Habe es aber im Forum nicht getestet, habe es nur im CodePen bearbeitet. Ich hoffe das es so in Ordnung ist.

Hier mal der neue Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
 

<div class="oberleiste0">
<div class="Wald">
<div class="Leiste">
</div>
<div class="niko"><img src="//files.homepagemodules.de/b855319/a_191_28d44d5d.gif"></div>
</div></div>
<div id="kopfteil">
<h6>Wir wünschen allen Mitgliedern und Gästen ein schönes Weihnachtsfest.
</h6></div>
</div>
<style>
h6
{
font-size: 25px !important;
text-transform: uppercase;
font-family: VERDANA,ARIAL,HELVETICA;
background: url(https://abload.de/img/glitzergoldipft7.jpg);
color: #fff;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
padding: 0;
-webkit-text-stroke: 1px #403d37;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: rgb(64, 61, 55);
padding: 5px;
}
 

.Oberlauf
{border:1px solid green;
margin-left:4%;
margin-right:4%;
margin-top: 7px !important;
margin-bottom: 31px;
border: 2px ridge #f5e091;
margin-left: 0%;
margin-right: 14%;
margin-top: -12px;
margin-bottom: 26px !important;
max-width: 1418px;
width: 100%;
text-align: center;
border-radius:10px;
}
#kopfteil {
box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset,0 0 5px rgba(0, 0, 0, 0.5);
background: linear-gradient(#e5eaf3 , #acb9cf);
padding: 1px;
height: auto;
text-align:center;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
 
}
 
.niko {
  width: 25px;
  height: 215px;
  bottom: 50%;
  position: fixed;
  animation: gehen 25s linear infinite;
}
 
@keyframes gehen {
  0%, 100% { 
    left: 0;    
    transform: translatex(-50%) scalex(1); 
  }
   49% { 
    left: 100%; 
    transform: translatex(-50%) scalex(1); 
  }
    50% { 
     left: 100%; 
     transform: translatex(-50%) scalex(-1);  
  }
     99% { 
      left: 0;   
      transform: translatex(-50%) scalex(-1);      }
}
 
 
.Wald {
background: url(https://i.postimg.cc/Pr0PdsK4/waldani.png)bottom center;
padding: 0;
height: 135px;
animation: ziehen 370s infinite linear;
 
}
 
.oberleiste0{
background: linear-gradient(180deg, rgb(209, 219, 228) 0%, rgb(174, 192, 204) 31%, rgb(255, 255, 255) 99%)!important;
background-image:url(https://i.postimg.cc/7YNdFGkd/himmel.jpg);
padding: 0;
margin-left:4%;
margin-right:4%;
height: 130px;
width:100%;
border-bottom: 0 solid #333;
margin: auto auto;
vertical-align: middle;
border-radius:8px;
box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset,0 0 5px rgba(0, 0, 0, 0.5);
}
.oberleiste0 {
animation: ziehen 750s infinite linear;
}
@keyframes ziehen {
from {background-position: 0 0;}
to {background-position: -9999px 0;}
}
 
</style>
 
 

Schlie�en

Ich hoffe, ich konnte dir hiermit ein bisschen helfen.

In CodePen sieht es so aus:

Dein Nikolaus!

Ich hoffe, es geht bei dir.

Liebe Grüße

Daishi

Funktioniert hervorragend! Die GIF-Datei hab ich noch ein wenig in der Höhe korrigieren müssen, aber sonst

.

Test im Testforum

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Daishi findet das Top!

Antworten

#12 | RE: Css Animation datum

15.12.2023 16:04 (zuletzt bearbeitet: 15.12.2023 18:45)

Kipper-Spedition

Informationen anzeigen

Beitr�ge:	176
Registriert seit:	09.10.2022

Homepage:	Link
Letzte Spende	Betrag 10 � Forum Spende
Sternzeichen	Stier
Likes	122

Was ich vergessen habe: Die animierte GIF war trotz "Position: fixed" nicht fixiert. Ich habe es dann so gemacht:

1
2
3
4
5
6
7
 
.niko {
  width: 155px;
  height: 10px;
  bottom: 40%;
  position: absolute;
  animation: gehen 25s linear infinite;
}
 

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Daishi und Wolfgang finden das Top!

Antworten

#13 | RE: Css Animation datum

15.12.2023 16:57 (zuletzt bearbeitet: 15.12.2023 18:42)

Sorry möchte mich entschuldigen, dass ich mich so spät melde, war heute Nacht mit dem Handy kurz online bei der Nachtschicht, bei Kaffee und Raucherpause.

Wird noch etwas dauern mit den Script, hoffe, du bist nicht böse. Habe im Nebenjob im Moment viel Arbeit. Da es kein Schnee gibt, habe ich viele Aufträge für Kehrdienst und Blätter wegfegen.

Ich hoffe, dass ihr mir das nicht übel nimmt. Sobald ich wieder mehr Zeit habe, mache ich am Script weiter. Ich entschuldige mich sehr dafür, dass ich dafür im Moment keine Zeit habe, aber wenn ich Zeit habe und es funktioniert, werde ich es hier hineinschreiben.

Ich wünsche euch noch ein schönes Wochenende und einen schönen 3 Advent.

Nette Grüße

Daishi

Daishi

Antworten

#14 | RE: Css Animation datum

15.12.2023 19:55 (zuletzt bearbeitet: 15.12.2023 19:59)

Nicht schlimm Daishi. Ich kann den Nikolaus ja auch so nehmen, dass er nur immer wieder hinläuft. Muss nicht zwangsläufig drehen, war eigentlich nur mal so ein Gedanke. Mach dir keinen Stress. Kipper Spedition, du hast es über die ganze Breite genommen, das geht. Ich würde aber an deiner Stelle die abgerundeten Ecken rausnehmen, hatte das extra für mein Forum angepasst, denke bei dir sähe es ohne besser aus oder? Weil es über die ganze Breite geht.

Antworten

#15 | RE: Css Animation datum

17.12.2023 11:48 (zuletzt bearbeitet: 17.12.2023 12:48)

Daishi

Informationen anzeigen

Beitr�ge:	339
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	295

Hallo ihr Lieben.

Habe etwas am Script weitergearbeitet, habe jetzt nur die Berechnungen fertig von X = Start bis Y= Ende, bis wohin er läuft.

Ich musste diese so berechnen, vorher war es über die ganze Breite also 1418 Pixel, musste ich durch 2 teilen, dann komme ich auf 709 Pixel. Musste dann alles umrechnen, auch die Positionen Start und Ziel.

Das Script ist noch nicht fertig, möchte es nur zeigen, wie weit ich jetzt gekommen bin. Start und Ziel funktioniert jetzt, nur muss ich die genaue Drehung berechnen, das wird noch ein wenig dauern.

Den Rest drumherum muss ich auch noch anpassen. Hauptsächlich habe ich mich erst um die Start- und Ziel-Positionen gekümmert.

So sieht es jetzt im Moment aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
 
<div class="Oberlauf">
<div class="oberleiste0">
<div class="Wald">
<div class="Leiste">
</div>
<div class="niko"></div>
</div></div>
<div id="kopfteil">
<h6>Wir wünschen allen Mitgliedern und Gästen ein schönes Weihnachtsfest.
</h6></div>
</div>
<style>
 h6
{
  font-size: 25px !important;
  text-transform: uppercase;
  font-family: VERDANA,ARIAL,HELVETICA;
background: url(https://abload.de/img/glitzergoldipft7.jpg);
color: #fff;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  padding: 0;
 -webkit-text-stroke: 1px #403d37;
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: rgb(64, 61, 55);
  padding: 5px;
  } 
  
  
.Oberlauf
{border:1px solid green;
        margin-left:4%;
margin-right:4%;
margin-top: 7px !important;
margin-bottom: 31px;
    border: 2px ridge #f5e091;
  margin-left: 0%;
  margin-right: 14%;
  margin-top: -12px;
  margin-bottom: 26px !important;
  max-width: 1418px;
  width: 100%;
  text-align: center; 
    border-radius:10px;
}
#kopfteil {  
box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset,0 0 5px rgba(0, 0, 0, 0.5);
background: linear-gradient(#e5eaf3 , #acb9cf);
padding: 1px;
height: auto;
text-align:center;
 border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;   
 
}
.niko {
background: url(//files.homepagemodules.de/b855319/a_191_28d44d5d.gif) no-repeat right;
background-size: 72px;
padding-top: 0px;
height: 156px;
right: 60;
    text-align: right;
    animation:geht 45s linear infinite alternate ;
  }
 
@keyframes geht {
   
   30% { 
     left: 100%; 
     transform: translatex(-2%) scalex(-1);  
  }
     100 { 
      left: 100%;   
      transform: translatex(-5%) scalex(-1);      }
}
 
    
.Wald {
background: url(https://i.postimg.cc/Pr0PdsK4/waldani.png)bottom center;
padding: 0;
height: 135px;
animation: ziehen 155s infinite linear;
 
}
 
.oberleiste0{
 background: linear-gradient(180deg, rgb(209, 219, 228) 0%, rgb(174, 192, 204) 31%, rgb(255, 255, 255) 99%)!important;   
background-image:url(https://i.postimg.cc/7YNdFGkd/himmel.jpg);
padding: 0;
margin-left:4%;
margin-right:4%;
height: 130px;
width:55%;
border-bottom: 0 solid #333;
margin: auto auto;
vertical-align: middle;
  border-radius:8px;   
box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset,0 0 5px rgba(0, 0, 0, 0.5);
}
.oberleiste0 {
animation: ziehen 750s infinite linear;
}
@keyframes ziehen {
from {background-position: 2 2;}
to {background-position: -9999px 2;}
 }
 
 

Schlie�en

Wollte nur mal Bescheid geben, wie weit ich jetzt bin und dass ich, wenn ich kann und die Zeit es zulässt, dass ich daran weiterarbeite.

Der nächste Schritt ist, dass sich der Nikolaus an der Position X und Y dort dreht. Wie gesagt, es wird noch eine Weile dauern.

Wollte nur Bescheid geben, wie weit ich bin, das Script ist noch nicht fertig.

Nette Grüße

Daishi

Daishi

Antworten

#16 | RE: Css Animation datum

17.12.2023 15:48 (zuletzt bearbeitet: 19.12.2023 08:26)

Daishi

Informationen anzeigen

Beitr�ge:	339
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	295

Habe es hinbekommen, dank Wolfgang.

Er hat mir ein Tipp gegeben, mit " Margin " für die X - Y Achsen. Warum ich es immer so schwer mache, wenn es einfach geht. Dafür danke ich dir sehr, @Wolfgang.

Ich habe jetzt nochmal alles bearbeitet, hoffe das es so in Ordnung ist. Ein kleines Problem gibt es noch, ein Video füge ich unten ein. Für das Forum muss man Anpassungen machen, und mit den Zahlen spielen, da es im Forum anders angezeigt wird als bei mir im CodePen.

@Arndt hat es auch schon bemerkt, er musste das Bild noch anpassen.

Zitat von Kipper-Spedition im Beitrag #11
Funktioniert hervorragend! Die GIF-Datei habe ich noch ein wenig in der Höhe korrigieren müssen, aber sonst .

Ich hoffe das es gut ankommt, eine Bitte hätte ich noch. Ich denke das Wolfgang hier nochmal darüberschaut, und die kleinen Fehler behebt, die da drinnen sind. Habe immer schon bemerkt, dass ich da als noch kleine Fehler drinnen habe.

Z.B. div vergessen oder Klammern und die ; die Namen weiß ich nicht alle auswendig.

Seid mir nicht böse, wenn da noch kleine Fehler drin sind.

Hier mal der gesamte Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 

<div class="oberleiste0">
<div class="Wald">
<div class="Leiste">
</div>
<div class="x_y"><div class="nikolaus_test"><img src="//files.homepagemodules.de/b104774/a_665_281ac3a7.gif"></div>
</div></div>
<div id="kopfteil">
<h6>Wir wünschen allen Mitgliedern und Gästen ein besinnliches Fest.
</h6></div>
</div>
<style>
h6
{
font-size: 18px !important;
text-transform: uppercase;
font-family: VERDANA,ARIAL,HELVETICA;
background: url(https://abload.de/img/glitzergoldipft7.jpg);
color: #fff;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
padding: 0;
-webkit-text-stroke: 1px #403d37;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: rgb(64, 61, 55);
padding: 1px;
}
 
 
.Oberlauf
{border:1px solid green;
margin-left:4%;
margin-right:4%;
margin-top: 7px !important;
margin-bottom: 31px;
border: 2px ridge #f5e091;
margin-left: 0%;
margin-right: 14%;
margin-top: -12px;
margin-bottom: 26px !important;
max-width: 718px;
width: 25%;
text-align: center;
border-radius:10px;
}
#kopfteil {
box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset,0 0 5px rgba(0, 0, 0, 0.5);
background: linear-gradient(#e5eaf3 , #acb9cf);
padding: 1px;
height: auto;
text-align:center;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
 
}
 
 
  
.nikolaus_test {
  top: 15px;
  position: absolute;
  width: 25px;
  height: 215px;
  animation: laufen 18s linear infinite;
}
.x_y {
  position:relative;
  margin-left:5%; 
  margin-right:7%;
}
 
@keyframes laufen {
  0%, 100% { 
    left: 0;    
    transform: translatex(-50%) scalex(1); 
  }
   49% { 
    left: 100%; 
    transform: translatex(-50%) scalex(1); 
  }
    50% { 
     left: 100%; 
     transform: translatex(-50%) scalex(-1);  
  }
     99% { 
      left: 0;   
      transform: translatex(-50%) scalex(-1);      }
} 
    
 
 
.Wald {
background: url(https://i.postimg.cc/Pr0PdsK4/waldani.png)bottom center;
padding: 0;
height: 135px;
animation: ziehen 370s infinite linear;
 
}
 
.oberleiste0{
background: linear-gradient(180deg, rgb(209, 219, 228) 0%, rgb(174, 192, 204) 31%, rgb(255, 255, 255) 99%)!important;
background-image:url(https://i.postimg.cc/7YNdFGkd/himmel.jpg);
padding: 0;
margin-left:4%;
margin-right:4%;
height: 130px;
width:25%;
border-bottom: 0 solid #333;
margin: auto auto;
vertical-align: middle;
border-radius:8px;
box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset,0 0 5px rgba(0, 0, 0, 0.5);
}
.oberleiste0 {
animation: ziehen 750s infinite linear;
}
@keyframes ziehen {
from {background-position: 0 0;}
to {background-position: -9999px 0;}
}
 
</style>
 
 
 

Schlie�en

Eine kleine Hilfe:

Für die Frage, ob man das Banner in der Breite ändern kann.

Um die Banner die breite zu ändern einfach in Zeile 42 und 107 die Zahlen ändern. Die Zahlen können von 15 % bis 100 % angegeben werden, das Bild läuft nicht mehr heraus, habe ich extra getestet.

Hier noch das Video:

Ich wünsche euch viel Spaß damit.

Herzliche Grüße

Daishi

Daishi

Nara, Wolfgang und ichwersonst finden das Top!

Antworten

#17 | RE: Css Animation datum

17.12.2023 23:14 (zuletzt bearbeitet: 19.12.2023 08:28)

So, habe es mir nun angepasst, ging ja dank dem Margin wirklich gut. Einzig im mobilen Template läuft es nicht so gut. Vor allem reagiert bei mir der Avatar links oben mit. Ist aber nicht weiter schlimm, ich aktiviere mobil einfach das andere script.
Vielen Dank Daishi für deine Mühe!!!!!

Wolfgang und Daishi finden das Top!

Antworten

#18 | CSS-Animation und kleine Korrekturen! datum

19.12.2023 13:52 (zuletzt bearbeitet: 24.12.2023 07:13)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3321
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1252

CSS-Animation und kleine Korrekturen!
Aktualisiert 22.12.23

Hallo zusammen,
besten Dank für die vielen Ideen, und was ich immer wieder notwendig ist, fürs unermüdlicher Testen!

Habe noch kleine Korrekturen anzubieten, um Einflüsse aus dem Forum zu minimieren!

Was habe ich gemacht?

Habe das Skript geordnet, nochmals die Classes erweitert, besonders "h6", um Einflüsse zu anderen Skripten zu vermeiden!
Habe den DIV-Container "Leiste" und die 2. Animation in ".oberleiste0" herausgenommen, weil sie keinen Einfluss auf das Skript hatten!
Weiterhin die Class "Niko" dem TAG "img" direkt zugeordnet und etwas anders formatiert, weil die Nikolausgrafik auf dem Android-Handy viel kleiner angezeigt wurde.
Zusätzlich eine kleine Option hinzugefügt, wenn kein Portal vorhanden ist!

Das Skript kann gut in die lange obere Portal-Box eingebaut werden!
Wer kein Portal hat oder nutzt, kann über Zeile 6 den Abstand zum rechten und linken Rand einstellen und alles in die Kopf- oder Fußzeile kopieren!!
Der Laufbereich des Nikolaus kann in Zeile 43+44 bestimmt werden!
Die Animationszeiten für den Wald und für den Nikolaus findet man in Zeile 50+77, für die Grafiken in Zeile 72+89

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
<style>
.Oberlauf {
  border: 2px ridge #f5e091;
  border-radius:10px;
  padding: 0 !important; 
  margin:20px 0;
}
 
.NikoContainer{
  background: linear-gradient(180deg, rgb(209, 219, 228) 0%, rgb(174, 192, 204) 31%, rgb(255, 255, 255) 99%)!important;
  background-image:url(//files.homepagemodules.de/b104774/a_666_f892b743.jpg);
  padding: 0;
  vertical-align: middle;
  border-radius:10px 10px 0 0;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset,0 0 5px rgba(0, 0, 0, 0.5);
}
 
#Wunschleiste {
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset,0 0 5px rgba(0, 0, 0, 0.5);
  background: linear-gradient(#e5eaf3 , #acb9cf);
  padding: 1px;
  height: auto;
  text-align:center;
  border-radius: 0 0 10px 10px;
}
 
#Wunschleiste h6 {
  font-size: 20px !important;
  text-transform: uppercase;
  font-family: VERDANA,ARIAL,HELVETICA;
  background: url(//files.homepagemodules.de/b104774/a_659_b89afa09.gif);
  color: #fff;
  padding: 5px;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-stroke: 1px #403d37;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgb(64, 61, 55);
}
 
.Nikolauf {
  position:relative;
  margin-left:2%; 
  margin-right:2%;
}
 
.Niko img {  
  margin-top: 20px;
  position: absolute;
  animation: lauf 25s linear infinite;
}
 
@keyframes lauf {
  0%, 100% { 
    left: 0;    
    transform: translatex(-50%) scalex(1); 
  }
   49% { 
    left: 100%; 
    transform: translatex(-50%) scalex(1); 
  }
    50% { 
     left: 100%; 
     transform: translatex(-50%) scalex(-1);  
  }
     99% { 
      left: 0;   
      transform: translatex(-50%) scalex(-1);      }
}
 
.Wald {
  background: url(//files.homepagemodules.de/b104774/a_668_62fc7097.png)bottom center;
  padding: 0; 
  margin:0;
  height: 135px;
  border-radius:10px 10px 0 0;
  animation: wald 370s infinite linear;
}
 
@keyframes wald {
  from {background-position: 0 0;}
  to {background-position: -9999px 0;}
}
</style>
 
<div class="Oberlauf">
<div class="NikoContainer">
  <div class="Wald">
    <div class="Nikolauf"><div class="Niko"><img src="//files.homepagemodules.de/b104774/a_665_281ac3a7.gif"></div></div>
  </div>
</div>
 
<div id="Wunschleiste">
  <h6>Wir wünschen allen Mitgliedern und Gästen ein schönes Weihnachtsfest.</h6>
</div>
</div>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Ich hoffe, ich habe nicht zu viel verdreht und man kann noch alles gut nachvollziehen!

Bis dann

Wolfgang

Daishi und ichwersonst finden das Top!

Antworten

Moderations-Kommentar:

Laufbereich Zeile 43+44 von 30% auf 2% umgestellt!
Zusätzlichen Rahmen "Oberlauf" wieder hinzugefügt!

#19 | RE: CSS-Animation und kleine Korrekturen! datum

19.12.2023 15:27

Daishi

Informationen anzeigen

Beitr�ge:	339
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	295

Habe es bei mir im Portal installiert, sieht gut aus, musste nur noch Anpassungen mit der Drehung machen.

Anpassungen in Zeile 44 und 45:

1
2
3
4
5
 
.Nikolauf {
  position:relative;
  margin-left:30%; 
  margin-right:30%;
}
 

in Zeile 44 und 45 musste ich umstellen auf 2 %

Und auf dem Handy sieht es auch top aus, passt sich bei mir automatisch an.

Vielen lieben dank

Liebe Grüße

Daishi

Daishi

Wolfgang findet das Top!

Antworten

#20 | RE: CSS-Animation und kleine Korrekturen! datum

19.12.2023 18:45

der Oberlauf Div Container ist bei mir hier

ein extra Rahmen in goldfarben.....

Antworten

Fehlersuche: Transparenter Hintergrund � � Fehlersuche: Riesen Problem bei Eingabe in Betreff

Seite 2 von 3 � Seite 1 2 3 Seite �

�hnliche Themen

Antworten

Letzter Beitrag

Xobor-Spoiler mit und ohne Spoiler-Grafik, neu animiert!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi

18.10.2023 21:09
von

Kipper-Spedition • Zugriffe: 362

Xobor-Spoiler mit Grafik in der Titelleiste
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 1 04.07.2022 22:30
Daishi • Zugriffe: 531
External - Link - Grafik: Links deutlicher darstellen!
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 3 13.07.2023 03:31
Kipper-Spedition • Zugriffe: 1133
Grafiken in der Iconbar wieder sichtbar machen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 0 06.07.2019 07:24
Wolfgang • Zugriffe: 521

Verlinkte Grafik - Hinweis auf spezielle Beiträge, Ereignisse und Favoriten!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

19.03.2017 08:25
von

Wolfgang • Zugriffe: 2014

Xobor Adventskalender & Osterkalender mit Auslösegrafik für alle Templates
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

23.12.2023 00:24
von

Kipper-Spedition • Zugriffe: 8122

Für jede Foren-Kategorie eine andere Grafik verwenden
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von HanseKnaller

14.06.2016 08:18
von

HanseKnaller • Zugriffe: 1188

Signatur: Themen als Grafik - Beliebig formatieren!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

11.03.2016 14:45
von

Wolfgang • Zugriffe: 1680

Grafiken, Zeichen und Formen in Word 2007/2010-2016 erstellen und ohne Hintergrund abspeichern
Erstellt im Forum Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps von Wolfgang

29.11.2015 17:58
von

Magister • Zugriffe: 3448

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 85 €

78%