HTML에서 그림을 위아래로 움직이는 방법: 1. 애니메이션 속성을 사용하여 움직이는 애니메이션을 그림에 바인딩합니다. 2. "@keyframes 애니메이션 이름 {50%{transform:translateY(이동 거리); }}" 문으로 각 애니메이션을 정의합니다. 동작의 한 프레임으로 그림이 위아래로 움직이도록 제어합니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
html에서는 animation
属性和“@keyframes
”创建一个图片上下移动的动画;动画中使用transform:translateY()
를 사용하여 이미지의 움직임을 제어할 수 있습니다.
구현 코드:
<!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>
추천 튜토리얼: "html 비디오 튜토리얼"
위 내용은 HTML에서 그림을 위아래로 움직이는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!