So implementieren Sie kreisförmiges Scrollen von Text in CSS: 1. Verwenden Sie das Animationsattribut für das Textelement, um eine kreisförmige Animation zu binden. 2. Verwenden Sie die Regel „@keyframes“ und die Anweisung „transform: TranslateX (Wert %)“. Stellen Sie jedes Bild der Animation auf Chinesisch ein. Die Übersetzungsposition des Wortes reicht aus.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
CSS, um den Textzyklus-Scrolleffekt zu erzielen
In CSS können Sie animationh und keyframest verwenden, um den Textzyklus-Scrolleffekt zu erzielen, indem Sie eine Zyklus-Scroll-Animation an den Text binden.
Implementierungscode:
html:
<div class="box">
<p class="animate">
文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容
</p>
</div>css:
.box {
width: 100%;
margin: 0 auto;
border: 1px solid #ff6700;
overflow: hidden;
}
.animate {
padding-left: 20px;
font-size: 12px;
color: #000;
display: inline-block;
white-space: nowrap;
animation: 5s wordsLoop linear infinite normal;
}
@keyframes wordsLoop {
0% {
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
@-webkit-keyframes wordsLoop {
0% {
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}Rendering:
Beschreibung: Das
Transform-Attribut wird auf die 2D- oder 3D-Transformation von angewendet Element. Mit dieser Eigenschaft können Sie das Element drehen, skalieren, verschieben, neigen usw.
translateX(x): Definieren Sie die Übersetzungstransformation, indem Sie einfach den Wert der X-Achse verwenden.
(Teilen von Lernvideos: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen kreisförmigen Text-Scroll-Effekt in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
