오늘 구현될 컨텐츠는 아래 그림과 같습니다.
CSS3의 애니메이션 속성을 이용하면 구현이 매우 간단합니다.
html 레이아웃:
<p class="pointer"> <p></p> </p>
.pointer의 p를 표시하려는 위치에 배치하면 위로 이동하는 효과가 있으므로 p의 높이는 화살표 높이보다 10px 더 높습니다.
css 스타일:
.pointer{ position: absolute; height: 3.8rem; bottom: 3rem; width: 100%; } .pointer p{ animation: anima-pointer 2s infinite; position: absolute; bottom: 0; left: 50%; margin-left: -1.4rem; height: 2.8rem; width: 2.8rem; background: url("../images/css-sprites.png") -63px 0; } /*animation*/ @keyframes anima-pointer { 0% {opacity:0;bottom:0} 100% {opacity:1;bottom:10px;} }
어느. 이것은 내 프로젝트의 코드입니다. 여전히 .pointer의 p 위치를 지정해야 하기 때문에 position:absolute를 사용했습니다. 정적 속성 외에 다른 속성을 사용하여 화살표 p가 상위 요소를 기준으로 절대적으로 위치하도록 할 수 있습니다.
애니메이션에 집중:
CSS 애니메이션을 사용하려면 먼저 @keyframes를 사용하여 애니메이션을 선언해야 합니다. 여기서는 애니마 포인터로 선언되어 있으며, 표시되지 않고 그대로 유지한 다음 100으로 전환합니다. % 표시 및 위치에 불투명도 1을 적용하여 원래 위치에 비해 10px 상승했습니다.
화살표 p 스타일에 애니메이션을 사용할 때 애니메이션을 사용하세요. 방금 선언한 애니메이션과 일부 애니메이션 속성을 따르세요. 구체적인 애니메이션 속성에 대해서는 w3c 공식 문서를 참고하시기 바랍니다. 여기서 선언한 속성은 애니메이션이 2초간 지속되며 애니메이션이 무한 루프로 실행된다는 것입니다.
위 내용은 CSS3에서 풀업 프롬프트 포인터 애니메이션을 구현한 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!