Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat gambar bergerak ke atas dan ke bawah dalam html
Bagaimana untuk membuat gambar bergerak ke atas dan ke bawah dalam html
- 青灯夜游asal
- 2021-12-14 16:52:0418219semak imbas
Cara membuat imej bergerak ke atas dan ke bawah dalam HTML: 1. Gunakan atribut animasi untuk mengikat animasi bergerak pada imej 2. Gunakan nama animasi "@keyframes {50%{transform:translateY (movement jarak);}}" Pernyataan mentakrifkan tindakan setiap bingkai animasi dan mengawal pergerakan naik dan turun gambar.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Dalam HTML, anda boleh menggunakan atribut animation dan "@keyframes" untuk mencipta animasi yang menggerakkan imej ke atas dan ke bawah menggunakan transform:translateY() dalam animasi untuk mengawal pergerakan imej itu.
Kod pelaksanaan:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite;
/* Safari and Chrome */
}
@keyframes mymove {
50% {
transform: translateY(100px);
}
}
@-webkit-keyframes mymove/* Safari and Chrome */
{
50% {
transform: translateY(100px);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Tutorial disyorkan: "tutorial video html"
Atas ialah kandungan terperinci Bagaimana untuk membuat gambar bergerak ke atas dan ke bawah dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!