CSS3에서 풀업 프롬프트 포인터 애니메이션을 구현한 예에 대한 자세한 설명

오늘 구현될 컨텐츠는 아래 그림과 같습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!