Bagaimana untuk mencapai kesan panning ke kiri dan hilang dalam css3-tutorial css-php.cn

Bagaimana untuk mencapai kesan panning ke kiri dan hilang dalam css3

WBOY

Lepaskan： 2021-12-15 18:24:14

asal

3695 orang telah melayarinya

Kaedah: 1. Gunakan pernyataan "animasi: nama masa" untuk mengikat animasi hilang terjemahan kiri ke elemen 2. Gunakan "@keyframes name {100%{transform: translateX (- jarak terjemahan); kelegapan: 0;}}" pernyataan mencapai kesan elemen bergerak ke kiri dan hilang.

Bagaimana untuk mencapai kesan panning ke kiri dan hilang dalam css3

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Bagaimana untuk mencapai kesan panning ke kiri dan hilang dalam css3

Dalam css, jika anda ingin mencapai kesan elemen menyorot ke kiri dan hilang, anda boleh menggunakan peraturan Properties animasi dan @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 tindakan gelongsor imej. Sifat transformasi menggunakan transformasi 2D atau 3D pada elemen. Sifat ini membolehkan kita memutar, menskala, mengalih atau mencondongkan elemen.

Terdapat juga atribut kelegapan yang digunakan untuk menetapkan gaya telus 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>
.div1{
  width:100px;
  height:100px;
  background:pink;
  margin:0 auto;
animation:fadenum 5s;
}
@keyframes fadenum{
  100%{transform:translateX(-200px);opacity:0;}
}
</style>
</head>
<body>
<div class="div1">这是一个向左平移消失的div</div>
</body>
</html>

Salin selepas log masuk

Hasil keluaran:

(Belajar perkongsian video: tutorial video css )

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan panning ke kiri dan hilang dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!