Mobirise-Tutorials.com

https://www.moremedia.at/

Sieht man immer häufiger und inzwischen finde ich da gut.
Ich komme aber nicht so wirklich dahinter, wie das geht.

Frank

https://wiki.selfhtml.org/wiki/Transfor ... nd_Pendeln

so

Volker,

die Keyframes-Anweisung habe ich nicht gefunden, wo hast Du diese denn gesehen?

… da dreht sich ja auch keine Schrift, sondern eine viereckige Grafik - mit gleicher Hintergrundfarbe.

Ich hatte ja mal vor vielen Jahren mit Keyframes etwas in NOF gemacht:

http://www.nof-tutorials.com/CSS-Transi ... index.html

http://www.nof-tutorials.com/CSS-Transi ... alerie.php

http://www.nof-tutorials.com/CSS-Transi ... olygon.php

http://www.nof-tutorials.com/CSS-Transi ... otate.html

… da kann man vielleicht das eine oder andere CSS anderweitig verwenden.

Hier mal ein einfaches Beispiel, das rotierende Farbspektrum könnte natürlich ebenso eine Grafik mit Text sein:

https://www.mobirise-tutorials.com/Test ... l#spectrum

CSS:

Code: Alles auswählen

.image {
  width: 150px;
  height: 150px;
  animation: spin 4s linear infinite;
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

HTML:

Code: Alles auswählen

<div class="d-flex justify-content-center">
  <img class="image" src="https://www.mobirise-tutorials.com/Vorlageseite/Test-Images/color-spectrum.png">
</div>

Na das ist jetzt mal wieder so eine peinliche Sache für mich.
Ich habe nicht gesehen, dass das ein Grafik ist - au weia!
Also: Sorry für blöde Frage

Frank

Na ja - so ganz doof finde ich die Frage nicht, denn das ist in Deinem Beispiel wohl eher anders gelöst - wie habe ich auch noch nicht entdeckt und auch gerade keine große Lust danach zu suchen.

Das ist die SVG Grafik mit dem Text aus der Beispielseite von Dir:

Code: Alles auswählen

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#C6C6C6;}
</style>
<g>
	<path class="st0" d="M128.967,67.461l19.641-11.61l-2.18-3.683l-15.49,9.156l-4.915-8.311l13.859-8.193l-2.107-3.567l-13.859,8.193
		l-4.571-7.73l15.258-9.02l-2.157-3.645l-19.404,11.474L128.967,67.461z M86.601,66.281l8.395-6.762l16.886,20.971l3.755-3.024
		L98.749,56.498l8.43-6.791l-2.741-3.403L83.86,62.879L86.601,66.281z M83.288,108.275l3.284-3.53l-7.294-6.788l-0.257-7.138
		l18.181,2.506l4.027-4.325L79.2,85.995l-0.815-18.381l-4.177,4.49l0.879,21.951l-11.419-10.63l-3.284,3.527L83.288,108.275z
		 M65.575,132.426l12.998-18.748l-3.518-2.44l-10.251,14.79l-7.936-5.501l9.173-13.232l-3.406-2.362l-9.173,13.232l-7.381-5.117
		L56.18,98.483l-3.481-2.411l-12.841,18.525L65.575,132.426z M52.838,147.479c-1.83,3.472-5.262,4.469-9.531,2.217l-0.916-0.486
		l-2.269,4.305l0.876,0.463c5.785,3.05,11.778,2.599,15.547-4.542c3.787-7.181,0.757-12.347-5.027-15.397l-17.828-9.407
		l-2.249,4.261l17.869,9.43C53.575,140.575,54.691,143.969,52.838,147.479 M32.515,162.731c7.019,2.475,9.849,8.158,7.915,13.645
		c-1.934,5.49-7.684,8.103-14.706,5.632c-7.019-2.475-9.864-8.115-7.93-13.602C19.728,162.916,25.493,160.26,32.515,162.731
		 M34.191,157.973c-9.15-3.22-17.233,0.332-20.306,9.054c-3.07,8.725,1,16.559,10.15,19.783c9.147,3.22,17.23-0.332,20.303-9.057
		C47.409,169.031,43.338,161.196,34.191,157.973 M17.346,214.317l-10.237-1.96l1.581-8.242c0.772-4.033,2.611-6.207,6.38-5.484
		c3.721,0.711,4.628,3.411,3.856,7.444L17.346,214.317z M32.957,222.215l0.905-4.732l-12.535-2.402l1.555-8.109l13.978-5.128
		l1.026-5.357l-14.813,5.423c-0.335-4.241-2.72-7.357-7.196-8.216c-5.848-1.119-9.734,2.171-11.084,9.216l-2.57,13.417
		L32.957,222.215z M10.734,232.507c3.966,0.153,5.649,2.249,5.464,7.071l-0.278,7.305l-11.497-0.439l0.278-7.302
		C4.886,234.316,6.722,232.356,10.734,232.507 M10.922,227.511c-6.849-0.26-9.985,3.992-10.263,11.251l-0.468,12.344l31.271,1.188
		l0.182-4.816l-11.674-0.442l0.286-7.531C20.535,232.249,17.73,227.771,10.922,227.511 M35.478,291.82l-3.163-22.595l-4.235,0.593
		l2.492,17.823l-9.563,1.339l-2.232-15.946l-4.102,0.575l2.232,15.943l-8.895,1.246l-2.454-17.554l-4.195,0.587l3.125,22.327
		L35.478,291.82z M18.213,330.604l-3.073-10.329l25.807-7.678l-1.373-4.62l-25.807,7.678l-3.087-10.376l-4.186,1.246l7.534,25.325
		L18.213,330.604z M52.231,342.295l-8.511-19.456l-4.001,1.752l6.58,15.039L21.63,350.422l1.931,4.414L52.231,342.295z
		 M69.154,372.708l-2.454-4.148l-12.11,7.161l-8.473-14.33l12.113-7.161l-2.431-4.111L28.86,366.044l2.431,4.111l11.104-6.565
		l8.47,14.33l-11.101,6.565l2.452,4.148L69.154,372.708z M54.633,409.882l-3.053-3.611l-3.475,2.937l3.053,3.611L54.633,409.882z
		 M60.34,416.633l-3.053-3.614l-3.475,2.937l3.053,3.614L60.34,416.633z M61.563,406.685l7.696-13.949l7.337,8.676L61.563,406.685z
		 M75.578,381.43l-3.29-3.891l-15.946,29.603l3.871,4.582l31.815-10.841l-3.203-3.787l-8.167,2.772l-9.199-10.881L75.578,381.43z
		 M99.067,407.887L72.56,426.456l3.683,3.114l22.173-15.677l-11.463,24.732l4.406,3.729l22.454-15.383l-11.778,24.408l3.787,3.2
		l13.868-29.25l-4.75-4.018l-22.575,15.455l11.451-24.859L99.067,407.887z M149.976,444.146l-19.641-11.61l-2.177,3.683l15.49,9.156
		l-4.915,8.314l-13.859-8.193l-2.107,3.565l13.859,8.196l-4.571,7.73l-15.255-9.02l-2.157,3.643l19.407,11.474L149.976,444.146z
		 M165.301,464.281l-8.392-3.429c2.57-5.337,7.904-6.227,12.249-4.452c5.47,2.235,7.485,8.274,4.756,14.952
		c-2.66,6.513-8.337,9.557-13.975,7.253c-3.842-1.57-6.438-5.36-5.533-9.719l-4.712-1.925c-1.737,6.993,2.206,12.836,8.759,15.516
		c8.52,3.481,16.539-0.304,20.173-9.199c3.533-8.641,0.809-17.106-7.25-20.398c-4.761-1.946-8.719-1.324-11.899,0.977l1.856-4.545
		l-3.961-1.619l-6.224,15.232l12.604,5.152L165.301,464.281z M201.813,462.139c-7.493-1.63-12.902,0.971-14.061,6.305
		c-0.971,4.452,1.165,7.777,5.403,9.716l7.62,3.596c2.853,1.315,3.628,3.053,3.206,4.993c-0.596,2.732-3.741,4.033-7.707,3.168
		c-3.836-0.833-6.337-3.134-5.819-6.99l-4.889-1.064c-1.269,6.048,3.252,10.488,9.907,11.937c6.525,1.422,12.081-1.012,13.212-6.213
		c0.98-4.495-1.174-7.733-5.36-9.705l-7.618-3.599c-2.891-1.367-3.674-3.062-3.252-5.001c0.633-2.908,3.975-4.258,8.384-3.299
		c4.495,0.977,7.224,3.926,6.681,7.687l4.886,1.064C213.567,468.34,209.483,463.81,201.813,462.139 M233.295,466.883
		c-7.548-0.671-13.116,2.952-13.879,11.532l-1.685,18.999l4.799,0.428l1.688-19.002c0.48-5.392,3.856-8.216,8.707-7.785
		c4.811,0.428,7.635,3.804,7.155,9.193l-1.685,19.002l4.799,0.428l1.688-19.002C245.645,472.095,240.8,467.55,233.295,466.883
		 M267.359,494.422l-6.612-14.495l11.338-0.717L267.359,494.422z M255.434,468.114l-5.085,0.321l14.267,30.453l5.984-0.379
		l10.26-32.008l-4.949,0.315l-2.642,8.21l-14.22,0.902L255.434,468.114z M369.686,432.683l-19.641,11.61l2.18,3.683l15.49-9.158
		l4.915,8.314l-13.859,8.193l2.107,3.567l13.859-8.196l4.571,7.73l-15.258,9.02l2.157,3.645l19.404-11.474L369.686,432.683z
		 M411.897,434.73l-8.554,6.56l-16.38-21.367l-3.825,2.931l16.38,21.367l-8.589,6.586l2.657,3.466l20.971-16.074L411.897,434.73z
		 M415.892,392.467l-3.365,3.449l7.129,6.961l0.084,7.141l-18.115-2.937l-4.128,4.227l21.948,3.53l0.379,18.395l4.284-4.388
		l-0.356-21.965l11.162,10.899l3.368-3.449L415.892,392.467z M433.81,368.435l-13.443,18.433l3.458,2.521l10.604-14.538l7.8,5.689
		l-9.485,13.009l3.348,2.44l9.485-13.006l7.256,5.29l-10.445,14.322l3.423,2.495l13.284-18.216L433.81,368.435z M446.556,353.368
		c1.83-3.472,5.262-4.466,9.531-2.214l0.916,0.483l2.269-4.302l-0.876-0.463c-5.785-3.053-11.778-2.599-15.547,4.542
		c-3.787,7.181-0.757,12.344,5.027,15.394l17.828,9.41l2.249-4.264l-17.869-9.427C445.819,360.274,444.703,356.88,446.556,353.368
		 M467.133,338.225c-7.022-2.472-9.849-8.155-7.918-13.645c1.934-5.487,7.687-8.1,14.706-5.629c7.019,2.472,9.864,8.112,7.93,13.602
		C479.917,338.043,474.153,340.697,467.133,338.225 M465.457,342.983c9.147,3.223,17.23-0.332,20.303-9.054
		c3.073-8.722-1-16.559-10.147-19.78c-9.147-3.223-17.233,0.332-20.303,9.054C452.237,331.926,456.31,339.763,465.457,342.983
		 M482.568,286.714l10.24,1.96l-1.581,8.242c-0.772,4.033-2.613,6.207-6.38,5.484c-3.721-0.714-4.628-3.414-3.856-7.444
		L482.568,286.714z M466.96,278.816l-0.905,4.732l12.532,2.402l-1.552,8.109l-13.978,5.129l-1.026,5.357l14.813-5.423
		c0.335,4.241,2.72,7.357,7.195,8.216c5.848,1.119,9.734-2.171,11.084-9.216l2.57-13.417L466.96,278.816z M489.466,268.554
		c-3.969-0.15-5.649-2.246-5.467-7.068l0.277-7.305l11.497,0.439l-0.278,7.302C495.314,266.747,493.478,268.707,489.466,268.554
		 M489.275,273.552c6.852,0.26,9.988-3.992,10.263-11.251l0.468-12.344l-31.268-1.188l-0.185,4.816l11.674,0.442l-0.286,7.531
		C479.666,268.814,482.47,273.292,489.275,273.552 M465.052,209.226l3.163,22.595l4.238-0.593l-2.495-17.823l9.563-1.336
		l2.232,15.943l4.102-0.575l-2.229-15.943l8.892-1.246l2.457,17.554l4.192-0.587l-3.125-22.327L465.052,209.226z M483.068,170.941
		l2.813,10.404l-25.987,7.034l1.258,4.652l25.989-7.034l2.827,10.448l4.218-1.139l-6.904-25.507L483.068,170.941z M448.938,158.551
		l8.031,19.655l4.044-1.651l-6.21-15.198l24.926-10.182l-1.824-4.464L448.938,158.551z M432.072,128.095l2.452,4.148l12.113-7.161
		l8.473,14.33l-12.113,7.161l2.428,4.111l26.938-15.926l-2.428-4.111l-11.104,6.565l-8.47-14.33l11.101-6.565l-2.452-4.148
		L432.072,128.095z M447.316,91.418l2.969,3.683l3.541-2.853l-2.966-3.683L447.316,91.418z M441.774,84.532l2.966,3.686l3.541-2.853
		l-2.966-3.686L441.774,84.532z M440.314,94.448l-8.028,13.761l-7.129-8.849L440.314,94.448z M425.698,119.362l3.197,3.969
		l16.649-29.216l-3.761-4.672L409.72,99.521l3.111,3.862l8.23-2.579L430,111.903L425.698,119.362z M402.64,92.511l26.504-18.566
		l-3.683-3.116l-22.173,15.677l11.465-24.732l-4.409-3.726l-22.454,15.38l11.781-24.405l-3.79-3.203l-13.868,29.253l4.753,4.016
		l22.575-15.455l-11.454,24.859L402.64,92.511z M351.913,55.998l19.638,11.61l2.177-3.683l-15.49-9.158l4.915-8.311l13.859,8.193
		l2.107-3.567l-13.859-8.193l4.571-7.73l15.258,9.02l2.154-3.645l-19.407-11.471L351.913,55.998z M336.706,35.614l8.395,3.429
		c-2.57,5.337-7.907,6.23-12.249,4.455c-5.47-2.235-7.487-8.277-4.758-14.952c2.663-6.516,8.34-9.557,13.978-7.253
		c3.842,1.57,6.435,5.357,5.53,9.716l4.715,1.925c1.737-6.99-2.206-12.833-8.762-15.513c-8.52-3.481-16.539,0.304-20.173,9.199
		c-3.53,8.641-0.807,17.106,7.253,20.398c4.758,1.946,8.716,1.324,11.899-0.98l-1.859,4.547l3.963,1.619l6.221-15.235l-12.604-5.149
		L336.706,35.614z M300.275,37.467c7.45,1.818,12.92-0.648,14.215-5.95c1.081-4.426-0.971-7.805-5.157-9.849l-7.528-3.787
		c-2.822-1.385-3.553-3.142-3.082-5.071c0.662-2.717,3.839-3.937,7.785-2.975c3.813,0.928,6.256,3.29,5.643,7.135l4.857,1.185
		c1.422-6.013-2.986-10.566-9.607-12.182c-6.484-1.581-12.099,0.708-13.362,5.88c-1.09,4.469,0.983,7.762,5.117,9.838l7.528,3.787
		c2.853,1.44,3.593,3.154,3.125,5.082c-0.705,2.891-4.082,4.157-8.465,3.087c-4.469-1.09-7.123-4.105-6.487-7.852l-4.86-1.185
		C288.68,30.974,292.649,35.606,300.275,37.467 M268.845,32.469c7.548,0.671,13.116-2.949,13.879-11.529l1.685-19.002l-4.799-0.428
		l-1.688,19.002c-0.48,5.392-3.854,8.216-8.707,7.785c-4.808-0.428-7.635-3.802-7.155-9.193l1.688-19.002l-4.802-0.425
		l-1.688,19.002C256.498,27.257,261.34,31.804,268.845,32.469 M234.787,4.647l6.612,14.495l-11.341,0.717L234.787,4.647z
		 M246.709,30.954l5.085-0.321L237.53,0.18l-5.984,0.379l-10.263,32.005l4.952-0.312l2.642-8.21l14.218-0.902L246.709,30.954z"/>
</g>
</svg>

Ich weiß jetzt gerade nicht, wie man die dann mit der CSS einbindet.

Habe von diesem Format leider null Ahnung und mich nie damit beschäftigt.

Das ist auch bei denen - meiner Ansicht nach - anders gemacht als mit @keyframes

Das auch gerade noch zum Thema gefunden.

Auf jeden Fall kann man so etwas also auch mit @keyframes gestalten:

https://www.w3schools.com/howto/tryit.a ... ss_loader2

Das liegt nur daran, dass das SVG irgendwie anders geladen wird.
Habe die Grafik von Moremedia mit Deiner CSS drin in dem vermutlich verstorbenen Steuerberater-Projekt (https://afripix.de/JuergenKohn / Steuern24)

Wie macht man das mit dem runden Text? Da weiß ich gerade nicht wie

Corel Draw, Text an Pfad ausrichten , als SVG speichern

Ah - danke - muss ich dann auch irgendwann mal ausprobieren

Ich glaube das geht auch mit "Word" oder vielleicht sogar auch mit meinem Textverarbeitungsprogramm "TextMaker".

Habe gerade dieses entdeckt in den Weiten des WWW
https://csswarp.eleqtriq.com/

Tommy Herrmann hat geschrieben: Sa 18. Mai 2024, 04:41 Volker,

die Keyframes-Anweisung habe ich nicht gefunden, wo hast Du diese denn gesehen?

… da dreht sich ja auch keine Schrift, sondern eine viereckige Grafik - mit gleicher Hintergrundfarbe.

Im ersten Beispiel dreht sich eine Schrift auf dem schwarzen Kreis

Code: Alles auswählen

<h1>Drehung mit <code>rotate</code></h1>
<aside class="disc">disc</aside>
<p>Durch :hover können Sie die Drehrichtung ändern!</p>

CSS:

Code: Alles auswählen

@keyframes rotating {
	0% {
		rotate: 0;
	}
	100% {
		rotate: 1turn;
	}
}

@keyframes scratch {
	0% {
		rotate: 0;
	}
	10% {
		rotate: -0.25turn;
	}
	100% {
		rotate: 1turn;
	}
}

.disc {
	animation: rotating 4s linear infinite;
	border-radius: 50%;
	width: 2em;
	height: 2em;
	padding: 2em;
	line-height: 200%;
	color: white;
	background: black;
	text-align: center;
}

.disc:hover {
	animation: scratch 4s linear infinite;
}

Ja - das weiß ich.

Ich meinte - wo bei dem ersten Beispiel von Frank - da habe ich es nicht sehen können.

Ich denke das ist nicht mit @keyframes gemacht.

stobi_de hat geschrieben: Sa 18. Mai 2024, 06:30 Also: Sorry für blöde Frage

Ich finde die Frage auch nicht blöd. Sie hat (wieder einmal) zur Zusammenstellung schöner Beispiele geführt.

… und hier noch als Grafik mit einem rotierenden Schriftzug, der bei Mausüber stoppt:

https://www.mobirise-tutorials.com/Test-Temp/#labeling

Mobirise-Tutorials.com

Drehender Text ?

Drehender Text ?

Re: Drehender Text ?

Re: Drehender Text ?

Re: Drehender Text ?

Re: Drehender Text ?

Re: Drehender Text ?

Re: Drehender Text ?

Re: Drehender Text ?

Re: Drehender Text ?

Re: Drehender Text ?

Re: Drehender Text ?

Re: Drehender Text ?

Re: Drehender Text ?

Re: Drehender Text ?

Re: Drehender Text ?

Re: Drehender Text ?