Detailed explanation of examples of implementing pull-up prompt pointer animation in css3

The content to be implemented today is as shown in the figure below:

With the animation properties of CSS3, it is very simple to implement.

html layout:

<p class="pointer">
   <p></p>
</p>

Let the p of .pointer be placed where you want it to be displayed. The p is placed on the pointer arrow diagram, and the p of .pointer is Box, because the box wrapping this arrow needs to move upward, so the height of p is 10px higher than the height of the arrow.

css style:

.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;}
}

Among them. This is the code in my project. Because I still need to position the p of .pointer, I used position:absolute. You can use other attributes besides static to allow the arrow p to be positioned absolutely relative to the parent element.

Focus on animation:
To use css animation, you must first use @keyframes to declare the animation. Here it is declared as anima-pointer. At 0%, let it stay in place and not display, and then transition to 100%. The transparency is set to 1 and the position is increased by 10px relative to the original position.
Use animation when using animation for the style of arrow p: just follow the animation just declared and some animation properties. For specific animation properties, please refer to the w3c official document. The properties declared here are that the animation lasts for two seconds and the animation is executed in an infinite loop.

The above is the detailed content of Detailed explanation of examples of implementing pull-up prompt pointer animation in css3. For more information, please follow other related articles on the PHP Chinese website!