audio Playlist: ▼

.mp3/wav:

► Dr.Hook "Sylvias mother"

► Dire Straits "Sultans ..."

► James Last "Biscaya"

0 Mitglieder und 4 G�ste sind derzeit online:
(Als registrierter User sieht man hier nat�rlich etwas mehr.)
Sei dabei! Es macht Spa�, kostet nix und tut �berhaupt nicht weh !

03.02.2019 01:351549154124
cirrus minor hat das Thema Soundeffekt bei Bild-Mouseover erstellt.
19.01.2019 19:101547921434
cirrus minor hat das Thema Gruppen über DropDown Menüs verwalten erstellt.

4 Aktive User
0 Mitglieder und 4 G�ste sind Online

Besucherrekord
100 Benutzer gleichzeitig online (13.06.2024 02:29)

Besucherz�hler
Heute waren 61 G�ste , gestern 6 G�ste online

auch hier! -->> ...unsere Facebookseite besuchen.

Foreninformationen:

Forenthemen	47
Textbeitr�ge	2352
Mitglieder	5
Neuestes Mitglied

Letzte Foren-Beitr�ge:

HTML,CSS & Co. leicht gemacht f�r Einsteiger �

CSS ... kein Hexenwerk !

� Elemente stylen per CSS � �� Effekte �ber keyframes per CSS hinzuf�gen
� CSS keyframes (Beipiel)

Seite 1 von 4 � Seite 1 2 3 4 Seite �

Themen-Einstellungen

Thema drucken

Bereich wechseln

CSS ... kein Hexenwerk ! CSS allgemein Schriften stylen per CSS Elemente stylen per CSS � Fragen zur Auswahl von Elementen (Selektoren) � � hover Effekte �ber CSS hinzuf�gen �� Effekte �ber keyframes per CSS hinzuf�gen HTML ... mit kleinen Dingen anfangen HTML Seite, Aufbau, Einbindungen, Meta Tags usw. Java-Script ... im Anf�ngermodus Gro�e Ver�nderungen mit kleinen, einfachen Scripten herbeif�hren Xobor - Foren - Hilfe administrative Einstellungen der Xobor Software Einbindungen von Codes und Scripten in die Xobor Software "User - Ecke" "G�ste - Stube" G�ste schreiben uns, Mitglieder antworten

#1 | CSS keyframes (Beipiel) datum

17.04.2018 15:49 (zuletzt bearbeitet: 07.05.2018 14:22)

cirrus minor

Informationen anzeigen

Beitr�ge:	1193
Punkte:	426
Registriert seit:	10.04.2018

Ich m�chte einem Anzeigeelement eine Drehung verleihen. Dazu hier ein Beispiel:

ich will mich drehen !

Nachdem ich die ID des Elementes ermittelt habe, f�ge ich der CSS einen keyframe hinzu und verweise die Animation auf die ID (im Falle "test_1"):

1
2
3
4
5
6
7
8
9
10
11
12
 

@keyframes orbit { 
  from { 
    transform:rotate(0deg) 
  } 
  to { 
    transform:rotate(360deg) 
  } 
}
 
#test_1 {animation: orbit 12s infinite linear;}
 
 

Ergebnis:

Hurra, ich dreh mich !

... wer andern eine Grube gräbt, ist selbst der Grubengräber ! :-)

MfG, Admin

antworten

#2 | RE: Beispiel für CSS style per keyframes datum

17.04.2018 16:41

Hast Du diesen Button selbst erstellt? Wenn man irgendwas anderes haben möchte, z. B. einen Smilie oder Farbe/Schriftart usw. ändern möchte, könnte dieses in dem Code denn geändert werden?

antworten

#3 | RE: Beispiel für CSS style per keyframes datum

17.04.2018 19:09 (zuletzt bearbeitet: 17.04.2018 19:37)

cirrus minor

Informationen anzeigen

Beitr�ge:	1193
Punkte:	426
Registriert seit:	10.04.2018

@Jeanie

prinzipiell l�sst sich die CSS Animation auf jedes Element anwenden. Wenn Du zur Probe mal Folgendes in die CSS eintr�gst, sollten sich pl�tzlich eine Menge Bilder im Kreise drehen:

1
2
3
4
5
6
7
8
9
 
@keyframes orbit { 
  from { 
    transform:rotate(0deg) 
  } 
  to { 
    transform:rotate(360deg) 
  } 
}
img {animation: orbit 12s infinite linear;}
 

... wer andern eine Grube gräbt, ist selbst der Grubengräber ! :-)

MfG, Admin

antworten

#4 | RE: Beispiel für CSS style per keyframes datum

17.04.2018 19:48

Da drehen sich sämtliche Smilies/Bilder auf der Forumseite!
Es klappt, aber habe es wieder rausgenommen, das ist zu krass! Bild entfernt (keine Rechte)

antworten

#5 | RE: Beispiel für CSS style per keyframes datum

17.04.2018 19:56

Das war nur als Beispiel zum Zeigen der Funktion gedacht. Man kann das nat�rlich auf einzelne ausgew�hlte Elemente einschr�nken.

... wer andern eine Grube gräbt, ist selbst der Grubengräber ! :-)

MfG, Admin

antworten

#6 | RE: Beispiel für CSS style per keyframes datum

17.04.2018 19:58 (zuletzt bearbeitet: 17.04.2018 20:00)

Und wie würde das funktionieren? Also, wenn ich z. B. nur einen Smilie auf der Forumseite drehen lassen möchte?
Was genau müsste dann in diesem Code geändert werden? Ich habe es nicht vor, doch interessant zu erfahren,
wie's geht...

antworten

#7 | RE: Beispiel für CSS style per keyframes datum

17.04.2018 20:01

Wenn sich nur ein bestimmter Smiley drehen soll, m�sste man zun�chst die genaue Adresse desjenigen kennen.

... wer andern eine Grube gräbt, ist selbst der Grubengräber ! :-)

MfG, Admin

antworten

#8 | RE: Beispiel für CSS style per keyframes datum

17.04.2018 20:14 (zuletzt bearbeitet: 17.04.2018 20:17)

Ok, meinst Du einen Smilie-Link
in meiner Iconbar? Und wenn ja, müsste ich diesen dann nach img eintragen?

antworten

#9 | RE: Beispiel für CSS style per keyframes datum

07.05.2018 13:26 (zuletzt bearbeitet: 07.05.2018 13:55)

Du k�nntest z.Bsp. den keyframe f�r die Rotation in die CSS eintragen und anschlie�end einen Forencode erstellen, der die Frameanwendung f�r den img Tag enth�lt.

Da w�rde sich dann der Smiley im Kreis drehen.

Ebenso k�nnten sich beispielsweise Worte oder Textabschnitte "drehen", wenn man das m�chte:

" mein Wort in Gottes Geh�r"

... wer andern eine Grube gräbt, ist selbst der Grubengräber ! :-)

MfG, Admin

antworten

#10 | RE: Beispiel für CSS style per keyframes datum

07.05.2018 15:15 (zuletzt bearbeitet: 07.05.2018 15:23)

Das ist super, wenn man nur durch Click auf den erstellten Forencode in der Iconbar einzelne Smilies drehen lassen könnte, natürlich vorher in css den passenden Befehl dafür eingeben, wie hier in Deinem Beispiel! Ich hatte ja mal diesen Code ausprobiert, den Du ein paar Beiträge vorher gepostet hast, aber alle Smilies sind mir zu heftig, nur in Beiträgen bei dem einen oder anderen Smilie,
das hätte was...

antworten

#11 | RE: Beispiel für CSS style per keyframes datum

07.05.2018 20:04

Jeanie

Informationen anzeigen

Beitr�ge:	1439
Registriert seit:	14.04.2018
Wohnort:	NRW

An welcher Stelle müsste denn der Link für einen Smilie eingesetzt werden? Und dann könnte man auch nur diesen einen drehen lassen, oder?

1
2
3
4
5
6
7
8
9
 
@keyframes orbit { 
  from { 
    transform:rotate(0deg) 
  } 
  to { 
    transform:rotate(360deg) 
  } 
}
img {animation: orbit 12s infinite linear;}
 

antworten

#12 | RE: Beispiel für CSS style per keyframes datum

08.05.2018 18:59

Geht das denn, dass man einige ausgewählte Smilies drehen lassen kann? Und wo müsste ich die Links dazu einfügen?

antworten

#13 | RE: CSS keyframes (Beipiel) datum

08.05.2018 19:17

Die einfachste Variante w�re, dazu einen Forencode zu erzeugen, der die Drehanimation enth�lt und dann jeweils die gew�nschte Grafikadresse von dem Smiley einsetzen, der sich drehen soll.

... wer andern eine Grube gräbt, ist selbst der Grubengräber ! :-)

MfG, Admin

antworten

#14 | RE: CSS keyframes (Beipiel) datum

08.05.2018 21:03

Ich habe ja schon einige Forencodes eingefügt, aber wie dieser aussehen müsste, da habe ich keinen blassen Schimmer!

antworten

#15 | RE: CSS keyframes (Beipiel) datum

08.05.2018 21:33 (zuletzt bearbeitet: 08.05.2018 21:44)

cirrus minor

Informationen anzeigen

Beitr�ge:	1193
Punkte:	426
Registriert seit:	10.04.2018

Hier mal ein Ansatz zum ausprobieren:

1
2
3
4
5
6
7
8
9
10
11
 

@keyframes orbit { 
  from { 
    transform:rotate(0deg) 
  } 
  to { 
    transform:rotate(360deg) 
  } 
}
 
.smileydreh {animation: orbit 10s infinite linear; background: none; border: none;}
 