Drehender Text ?

[stobi_de]

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

[Volker]

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

so

[Tommy Herrmann]

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.

[Tommy Herrmann]

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>

[stobi_de]

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

[Tommy Herrmann]

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

[Tommy Herrmann]

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

[stobi_de]

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)

[Tommy Herrmann]

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

[stobi_de]

Corel Draw, Text an Pfad ausrichten , als SVG speichern

[Tommy Herrmann]

Ah - danke - muss ich dann auch irgendwann mal ausprobieren

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

[stobi_de]

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

[Volker]

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;
}

[Tommy Herrmann]

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.

[Rancher]

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.

[Tommy Herrmann]

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

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