Home > Article > Web Front-end > How to make pictures move up and down in html
How to make pictures move up and down in html
- 青灯夜游Original
- 2021-12-14 16:52:0418122browse
htmlHow to make the picture move up and down: 1. Use the animation attribute to bind a moving animation to the picture; 2. Use "@keyframes animation name {50%{transform:translateY (movement distance);}}" The statement defines the action of each frame of the animation and controls the picture to move up and down.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
In html, you can use the animation attribute and "@keyframes" to create an animation that moves the image up and down; use transform in the animation: translateY()Control the movement of pictures.
Implementation code:
<!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>
Recommended tutorial: "html video tutorial"
The above is the detailed content of How to make pictures move up and down in html. For more information, please follow other related articles on the PHP Chinese website!