Rumah >hujung hadapan web >tutorial css >Bagaimana untuk membuat teks menatal mendatar dalam css
Bagaimana untuk membuat teks menatal mendatar dalam css
- WBOYasal
- 2021-12-09 11:54:095601semak imbas
Dalam CSS, peraturan bingkai utama, animasi dan atribut transformasi boleh digunakan untuk menatal teks secara mendatar Sintaks ialah "elemen {animation: name time}@keyframes name {100%{transform: translateX (scroll distance)} }".
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Cara melakukan teks tatal mendatar dalam css
Dalam css, jika anda ingin mencapai teks tatal mendatar, anda perlu menggunakan animasi atribut dan peraturan @keyframes Untuk mencapai kesan animasi penskalaan elemen, animasi boleh dibuat melalui peraturan @keyframes.
Animasi dicipta dengan menukar secara beransur-ansur satu set gaya CSS kepada yang lain. Anda boleh menukar set gaya CSS ini beberapa kali semasa animasi.
Nyatakan masa apabila perubahan berlaku sebagai peratusan, atau melalui kata kunci "dari" dan "kepada", yang bersamaan dengan 0% dan 100%. 0% ialah masa mula animasi, 100% ialah masa tamat animasi. Untuk sokongan penyemak imbas terbaik, anda harus sentiasa menentukan pemilih 0% dan 100%.
Terdapat juga atribut transformasi yang digunakan untuk menetapkan kesan penatalan teks. Sifat transformasi menggunakan transformasi 2D atau 3D pada elemen. Sifat ini membolehkan kita memutar, menskala, mengalih atau mencondongkan elemen.
Contoh adalah seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:200px;
border:1px solid #000;
overflow:hidden;
}
p{
animation:fadenum 5s infinite;
}
@keyframes fadenum{
0%{transform:translateX(200px);}
100%{transform:translateX(-200px);}
}
</style>
</head>
<body>
<div><p>这是段横向滚动的文字文字</p></div>
</body>
</html>Hasil keluaran:
(Belajar perkongsian video: tutorial video css )
Atas ialah kandungan terperinci Bagaimana untuk membuat teks menatal mendatar dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!