directory

• demand
• Train of thought
• implementation
  • Translucent bubble making
    • HTML structure
    • Lessrem’s rule also uses px for its own conversion
  • Dialog box CSS animation
  • Add timer to complete click animation and timer animation
    • Encapsulated function
    • A function call

demand

Again, we need to get the requirements out first. Requirements:

1. The dialog bubble should be animated for a total of 4 seconds
2. When there is no click, the bubbles appear every eight seconds
3. When clicking, if the animation is not played, it will not be executed, and if the animation is played, the bubble will appear immediately

Then take out the finished drawing, which looks like this:

Train of thought

1. The first thing to do is to make bubbles
2. Next, use CSS to animate
3. Add timer to complete click animation and timer animation

implementation

Translucent bubble making

HTML structure

<p class="select-toast" id="select-toast">Close your eyes, pray with your heart, and those who work hard are rewarded</p>
Copy the code

Less (rem rules use your own conversion, you can also use px)

.select-toast{
    position: absolute;   // Determine the location of the dialogue
    top: 3.4 rem;
    right: 0.2 rem;
    width: 1.45 rem;   // Determine the width, and the height is supported by the text
    padding: 0.18 rem;  // Determine the distance of the text from the outside of the dialog box
    line-height: 0.4 rem;  // Set the line height of the text
    color: #d06e5a;  // Text color
    background-color: rgba(255.255.255.0.85);  // Background color, translucent
    border-radius: 0.2 rem;  // Rounded corners of the dialog box
    opacity: 0;  // The initial opacity is 0
    &::before{    // The triangle
        content:"";   // Pseudo-elements required
        width: 0;    // Its width and height are 0
        height: 0;
        border-width: 0.2 rem;  // Triangle height
        border-color:transparent rgba(255.255.255.0.85) transparent transparent;   // The triangle whose Angle faces left
        border-style: solid;  // The frame is solid
        position: absolute;  // The position of the triangle
        left: -0.4 rem;
        top: 0.4 rem; }}Copy the code

Dialog box CSS animation

.select-toast.toastAni{
     -webkit-animation: toast 4s;   // Animation of the dialog box
     animation: toast 4s;
}

// Animation definition for the dialog
@-webkit-keyframes toast {  
    8%{
        opacity: 0.8;
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    16%{
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    24%{
        opacity: 1;
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }
    32%{
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    82. 5% {opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100%{
        opacity: 0; }}@keyframes toast {
    8%{
        opacity: 0.8;
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    16%{
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    24%{
        opacity: 1;
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }
    32%{
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    82. 5% {opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100%{
        opacity: 0; }}Copy the code

Add timer to complete click animation and timer animation

The first step is to identify an area to click on that will trigger the bubble to appear

<! - click on the <))) > < -- - > the air bubbles |
<div class="fish-click" id="fish-click"></div>
Copy the code

Encapsulated function

// The array of words appears randomly
var toastText = [
   "Ha-ha, good morning."."Have you eaten this morning?"."Study hard and make progress every day."."Close your eyes, pray with your heart, and those who try are rewarded."."Remember to go to bed early.",]// The timer variable
var fishAlert;
// Pop the function
function textShow(aniTime,spaceTime){
    // Empty the timer
    clearInterval(fishAlert);
    // Unbind the event
    $("#fish-click").off("tap");
    // Set the text to be displayed, randomly generating integers ranging from 0 to 4
    var random = Math.floor(Math.random() * 5);
    // Display randomly generated text
    $("#select-toast").html(toastText[random]).addClass("toastAni");
    // Remove animation after 4000 seconds
    setTimeout(function(){
        // Remove the animation style
        $("#select-toast").removeClass("toastAni");
        // Rebind events
        $("#fish-click").off("tap").on("tap".function(){
            textShow(4000.8000);
        })
        // Add an 8-second timer
        fishAlert = setInterval(function(){
            // Generate an integer from 0 to 4 randomly
            var random = Math.floor(Math.random() * 5);
            // Add animation
            $("#select-toast").html(toastText[random]).addClass("toastAni");
            setTimeout(function(){
                // Remove the animation after the animation is finished
                $("#select-toast").removeClass("toastAni");
            },aniTime)
        },spaceTime);
    },aniTime);
}
Copy the code

A function call

$(document).ready(function(){
    // The animation time is 4000ms and the interval time is 8000ms
    textShow(4000.8000);
})
Copy the code

It’s relatively simple overall, so let me just record it here.

• @version1.0 — 2018-11-7 — Create H5 Speech Bubble Click Animation
• @version1.1 — 2020-11-1 — Modify name and header diagram

© burning_ rhyme groups