More than 300 lines of CSS code to achieve the explosive special effects of WeChat 8.0

A major feature of the WeChat 8.0 update is the support for animated emojis. If the message you send only has one built-in emoji icon, this emoji will have a simple animation. Some special emojis also have full-screen special effects. For example, the fireworks emoji has a full-screen fireworks special effect, and the bomb emoji has an explosion animation and the message and avatar will vibrate accordingly.

With the professional spirit of a front-end engineer, I wanted to see if I could achieve a similar special effect. After a long time of struggling, the result is as follows:

The core of the project is the use of the lottie animation library. lottie is an animation library produced by Airbnb for all platforms (Web, Android, IOS, React Native). Its feature is that it can directly play animations made with Adobe After Effects. After designers use the Bodymovin plug-in in After Effects to export animations to JSON format, developers can then play them through the SDK of the corresponding platform. (Project address and example demonstration are at the end of the article)

After completing this project, I feel that my front-end knowledge has been enriched, and I have new ideas for dealing with complex special effects in the future. If you also want to further improve your front-end development skills, you can follow this article to practice. In addition to using the Lottie library, all of this article is implemented using native HTML/CSS/JavaScript, so whether you are a React, Vue or other engineer, you can quickly master it.

Writing interface

I originally wanted to skip the HTML/CSS part, but I thought that CSS might be the weak point of most people, so I decided to write down the ideas of implementing the interface. If you want to see the core part, you can jump directly to: 2. Sending normal messages .

1. HTML part

First, let’s look at the HTML part. From the effect diagram:

• There is a title bar at the top that says Chat with XXX.
• In the middle is the chat information panel, which contains messages sent by both parties. Each message consists of the sender's avatar and the message content. The ones I sent are on the right, and the ones sent by the other party are on the left.
• Below is the bottom information, with an emoticon selection button, an edit message text box, and a send button.

Then the HTML code written according to this structure is as follows:

<main>
  <div class="chat">
    <div class="titleBar">Chat with XXX</div>
    <div class="panel">
      <div class="message mine">
        <img src="./me.png" alt="" />
        <p><span>Hello</span></p>
      </div>
      <div class="message yours">
        <img class="avatar" src="./you.png" alt="" />
        <p><span>Hi</span></p>
      </div>
      <!-- Omit other messages -->
    </div>
    <footer>
      <button class="chooseSticker">
        <img src="./emoji.svg" alt="" />
        <div class="stickers"></div>
      </button>
      <input
             class="messageInput"
             type="text"
             name=""
             id=""
             placeholder="Please enter chat information"
             />
      <button class="send">Send</button>
    </footer>
  </div>
</main>

The interface parts corresponding to each element are:

• The <main /> element is an overall container used to center the chat window.
• <div class="chat"> is the container of the chat application, which is used to layout the title bar, chat panel and bottom sending box.
• <div class="titleBar"> is used to display the title bar.
• <div class="panel"> is the message panel, which is used to layout the messages.
• <div class="message"> is the message container. Different classes are used to distinguish the sender. mine means it is sent by me, and yours means it is sent by the other party. In each message, <img class="avatar" > is used to display the avatar, and the <p> element is used to display the text. The <span> element in the <p> element will serve as a lottie container to play the emoticon animation.
• <footer> is used to layout the bottom operation buttons and message sending box. in:
• <button class="chooseSticker"> is the expression selection button, which is represented by a smiley face svg image. <div class="stickers"> inside is the expression selection box pop-up layer. The expressions inside will be dynamically loaded in JS in order to achieve animation preview.
• <input class="messageInput" /> is a chat message input box, nothing special.
• <button class="send">

This is the basic structure of HTML. Next, let’s look at the CSS style.

2. CSS part

Create a style.css file in the project root directory and import it in the <head> tag of index.html:

<link rel="stylesheet" href="style.css" />

2.1 Global styles

First, define some CSS variables. CSS variables are used to facilitate us to reference the same attribute value. If we update the style later, we can avoid multiple modifications:

:root {
  --primary-color: hsl(200, 100%, 48%);
  --inverse-color: hsl(310, 90%, 60%);
  --shadow-large: 0 0px 24px hsl(0, 0%, 0%, 0.2);
  --shadow-medium: 0 0 12px hsl(0, 0%, 0%, 0.1);
}

The meanings of these variables are:

• --primary-color: hsl(200, 100%, 48%) , primary color, such as the blue background of the messages I sent.
• --inverse-color: hsl(310, 90%, 60%) , inverse color, or accent color, contrasting with the primary color, such as the background color of a send button.
• --shadow-large: 0 0px 24px hsl(0, 0%, 0%, 0.2) , large shadow, such as the shadow of the title bar and bottom bar.
• --shadow-medium: 0 0 12px hsl(0, 0%, 0%, 0.1) , small shadow, such as input box and emoticon selection pop-up layer.

Next are some reset styles:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: Helvetica, "PingFang SC", "Microsoft Yahei", sans-serif;
}

These styles are valid for all elements. Set the box model to border-box so that the inner margins and borders are calculated within the width and height, set the inner and outer spacing to 0, and finally set the default font.

2.2 Main Container

The Main container is used to position the chat application container in the middle of the browser. It uses a grid layout, sets the width and height to 100% of the browser's visible area, and sets the background color to dark gray:

main {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  background-color: hsl(0, 0%, 10%);
}

2.3 Chat Application Container

The chat application container sets a fixed width and height to simulate a mobile phone screen, and uses a grid layout to control the position of the title bar, chat panel, and bottom operation bar:

.chat {
  width: 375px;
  height: 700px;
  background: hsl(0, 0%, 100%);
  border-radius: 8px;
  display: grid;
  grid-template-rows: max-content 1fr max-content;
}

Here, grid-template-rows is used to divide the chat application into 3 rows. The height of the title bar in the first row and the bottom operation bar in the last row are the maximum height of the content, and the chat panel in the middle is the floating height.

2.4 Title Bar

The title bar simply sets a padding, text centering, and shadow:

.titleBar {
  padding: 24px 0;
  text-align: center;
  box-shadow: var(--shadow-large);
}

Interface optimization tips: The inner spacing is used to increase the white space and cause visual relaxation, and the shadow is used to distinguish it from the chat panel below.

2.5 Chat Panel

The chat panel uses flex layout to arrange the messages in it, sets the direction to arrange in columns, and sets overflow to auto. When the overall height of the message exceeds the height of the panel, a scroll bar appears:

.panel {
  display: flex;
  flex-direction: column;
  padding: 24px 12px;
  overflow:auto;
}

Interface optimization tips: The padding here is also to leave enough space to separate it from other elements to avoid a sense of crowding.

2.6 Messages

The message is divided into three parts: message container, avatar and message body. The message body and avatar are contained in the message container. Let’s first look at the style of the message container. The message container uses flex layout to put the message body and avatar in one line, with a maximum width of 80% of the panel width, and sets the font and margins:

.message {
  display: flex;
  max-width: 80%;
  font-size: 14px;
  margin: 8px 0;
  position: relative;
}

position here is set to relative in order to position the full-screen special effects animation behind it.

The avatar simply sets the width, height, rounded corners, and distance from the message body:

.message img {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  margin-right: 12px;
}

Interface optimization tips: Here we have to mention the importance of spacing. Do not arrange the elements too compactly, otherwise it will greatly affect the visual effect. The most direct impact is to cause visual crowding and visual fatigue.

The message body also has spacing and rounded corners, and the rounded corners here are consistent with the avatar to increase the sense of harmony. It also sets a shadow and uses flex layout to center the text or emoticon message inside:

.message p {
  padding: 8px 12px;
  border-radius: 12px;
  box-shadow: var(--shadow-large);
  display: flex;
  align-items: center;
}

By default, these styles are based on the other party's message. If it is a message sent by me, it needs to be placed on the right and some adjustments need to be made. First, for the message I sent, I changed flex-flow to row-reverse so that the positions of the avatar and the message body were swapped, and then used align-self to align to the right side of the panel:

.message.mine {
  flex-flow: row-reverse;
  align-self:flex-end;
}

Adjust the avatar's outer margin. Now it should be the margin from the message body on the left :

.message.mine img {
  margin-right: 0;
  margin-left: 12px;
}

Set the background color of the message body to blue and the text to white:

.message.mine p {
  background-color: var(--primary-color);
  color: white;
}

2.7 Bottom Operation Bar

First, let's look at the overall layout of the bottom action bar container. Use the grid layout to divide the emoji selection button, message sending box, and send button into three columns. Except for the message sending box, which has a floating width, the other two buttons have a fixed width and are centered by default. Finally, set the shadow and spacing:

footer {
  display: grid;
  grid-template-columns: 48px 1fr 75px;
  justify-items: center;
  padding: 12px;
  box-shadow: var(--shadow-large);
}

The emoticon selection button aligns itself to the left and sets relative positioning to position the emoticon selection popup layer, and then sets the size of the button icon:

.chooseSticker {
  justify-self: start;
  position: relative;
}
.chooseSticker img {
  width: 36px;
  height: 36px;
}

The CSS code for the emoji selection pop-up layer is quite a lot but it is very simple. Let’s take a look at the code first:

.stickers {
  display: grid;
  grid-template-columns: repeat(auto-fill, 24px);
  column-gap: 18px;

  border-radius: 8px;
  background-color: white;
  box-shadow: var(--shadow-medium);
  padding: 6px 12px;
  font-size: 24px;

  position: absolute;
  top: calc(-100% - 18px);
  width: 300px;
  opacity: 0;
}

What this code means is:

• The pop-up layer uses grid layout. Repeat(auto-fill, 24px) means placing as many column elements as possible in a row as the width allows. The width of each column is fixed at 24px. Then set the column spacing to 18px.
• Set corner radius, background color, shadow, padding, and font size.
• Set the positioning to absolute, move it up to 100% of the containing element's height (that is, the height of .chooseSticker) minus 18px, and adjust it to the appropriate position. Set the width to 300px and the opacity to 0 to hide it.

The styles of the message input box and button are relatively simple. The width of the message input box fills the entire column, and the send button uses justify-self: end to align itself to the right. Here is the code posted at once:

.messageInput {
  box-shadow: var(--shadow-medium);
  padding: 0px 12px;
  border-radius: 8px;
  width: 100%;
}
.send {
  height: 100%;
  width: 90%;
  border-radius: 8px;
  justify-self: end;
  color: white;
  background-color: var(--inverse-color);
}

Finally, add a .show style to add this style to the emoticon pop-up layer to display it when the send emoticon button is clicked:

.show {
  opacity: 1;
}

3. JS part

Before adding functionality to the chat interface, write some basic JS code. Create an index.js file in the project root directory and reference it in index.html. Note that it should be placed above the closing tag of </body> so that the code in js will be executed only after the HTML DOM is loaded to prevent the element from being found:

<body>
   <!-- Other codes omitted-->
   <script src="index.js"></script>
 </body>

In index.js, first get the DOM element to be operated:

const panelEle = document.querySelector(".panel");
const chooseStickerBtn = document.querySelector(".chooseSticker");
const stickersEle = document.querySelector(".stickers");
const msgInputEle = document.querySelector(".messageInput");
const sendBtn = document.querySelector(".send");

in:

• panelEle is a message panel element used to append new messages.
• chooseStickerBtn is the emoticon selection button. Clicking it will pop up the emoticon selection box.
• stickersEle is the emoticon selection box that pops up.
• msgInputEle is the message input box.
• sendBtn is the send button.

Then import Lottie's js library. You can download it from the sample code repository, or download lottie.min.js from https://cdnjs.com/libraries/bodymovin. After downloading, put it in the project root directory, and then import it above the import of index.js in index.html:

<script src="lottie.min.js"></script>

Download the expression animation resource files, which are all in json format. After downloading, just put them in the project root directory:

• Pumpkin Emoticon: https://lottiefiles.com/43215-pumpkins-sticker-4
• Bomb emoticon: https://lottiefiles.com/3145-bomb
• Explosion animation: https://lottiefiles.com/9990-explosion

Next, let’s take a look at how each function is implemented.

Send a normal message

When sending a normal message, after the user enters the message in the input box and clicks Send, the message will be added to the message list and the content in the input box will be cleared. Then add a click event to the send button:

sendBtn.addEventListener("click", () => {
  const msg = msgInputEle.value;
  if (msg) {
    appendMsg(msg);
  }
});

In the event handling function:

• Determine whether the user has entered a message.
• If entered, it is appended to the message list.

Let's take a look at the code of the appendMsg() function:

function appendMsg(msg, type) {
  // Create message element const msgEle = panelEle.appendChild(document.createElement("div"));
  msgEle.classList.add("message", "mine"); // Set to the style sent by "me" msgEle.innerHTML = `
    <img class="avatar" src="./me.png" alt="" />
    <p><span>${msg}</span></p>
  `;
  // Scroll to the latest message panelEle.scrollTop = panelEle.scrollHeight;
  msgInputEle.value = "";
}

The function receives two parameters, msg and type, which are the content and type of the message to be appended. type is optional. If it is not passed, it is considered a normal text message. If "stickers" is passed, it is an emoticon message, which is not needed now. The following things are mainly done in this function:

• Create a new message element msgEle according to the HTML structure of the message and append it to the message list.
• Set the message style to Sent by me.
• The internal elements are the avatar and the text message, which are assigned to the innerHTML attribute of msgEle in the form of a template string, and the value of the msg variable is used in <p> .
• Finally, scroll the scroll bar to the latest message and clear the message in the input box.

This will allow you to send normal text messages.

Send animated emoticons

Before sending animated emoticons, you need to load them first. At the top of index.js, define the key-value pair information of the expression name and the expression animation file path:

const stickers = {
  bomb:
    path: "./3145-bomb.json",
  },
  pumpkin:
    path: "./43215-pumpkins-sticker-4.json",
  },
};

We will find the corresponding animation path based on keys such as bomb and pumkin . Then initialize the expression in the pop-up layer for the user to select:

// Initialize the expression panel. You can also initialize it when the expression selection window pops up. Object.keys(stickers).forEach((key) => {
  const lottieEle = stickersEle.appendChild(document.createElement("span"));
  // Create a lottie player for each expression const player = lottie.loadAnimation({
    container: lottieEle,
    renderer: "svg",
    loop: true,
    autoplay: false,
    path: stickers[key].path,
  });
  // When an emoji is selected, send a message and set the type to sticker emoji message lottieEle.addEventListener("click", () => {
    appendMsg(key, "sticker");
  });
  // When the mouse moves over, play the animation preview lottieEle.addEventListener("mouseover", () => {
    player.play();
  });
  // When the mouse moves over, stop the animation preview lottieEle.addEventListener("mouseleave", () => {
    player.stop();
  });
});

The code here performs the following operations:

• Traverse the objects storing expression information.
• Create a lottie container and use the span element, because the lottie animation player needs to be mounted in a specific html element.
• Call lottie's loadAnimation() to load the animation. It needs to pass the following parameters:
• container: The container to which the player will be mounted.
• Renderer: You can choose whether to use svg or canvas to render the animation.
• loop: Whether to play in a loop. Since the animation is previewed in the expression selection pop-up layer, loop playback is supported.
• autoplay: Whether to play automatically. Set it to no here, and then let it play the animation when the mouse moves over it.
• path: animation json file path, obtained directly from the object.
• loadAnimation() will return an instance of lottie and save it in player.

Then several events are registered later:

• When lottieEle, the emoticon, is clicked, an emoticon message is sent, and the msg parameter of appendMsg() is set to the key of the emoticon, and the type parameter is set to "sticker".
• When the mouse moves over the expression, the animation starts playing.
• When the mouse moves out of the expression, stop the animation.

Next, add an event to the Send Emoji button. When clicked, the display state of the emoji pop-up layer is switched:

chooseStickerBtn.addEventListener("click", () => {
  stickersEle.classList.toggle("show");
});

At this time, click the Send Emoji button to see the emoji selection pop-up layer. You can't send emoticons yet because they haven't been processed in the appendMsg() function. Let's modify the code in it now. First, determine: if it is an emoticon message, do not add any information to the <p> element in the message:

function appendMsg(msg, type) {
 // ... 
  msgEle.innerHTML = `
    <img class="avatar" src="./me.png" alt="" />
    <p><span>${type === "sticker" ? "" : msg}</span></p>
  `;
}

Then below it, call the playSticker() function to play the animation:

// Process emoji messages and play related animations if (type === "sticker") {
  playSticker(msg, msgEle);
}

The playSticker() function receives two parameters, one is the emoticon key and the other is the message element. The content of the msg variable at this time is the expression key passed in the lottieEle click event. The code in the function is as follows:

function playSticker(key, msgEle) {
  // Expression message, create lottie animation const lottieEle = msgEle.querySelector("span");
  lottieEle.style.width = "40px";
  lottieEle.style.height = "40px";
  lottie.loadAnimation({
    container: lottieEle,
    renderer: "svg",
    loop: false,
    autoplay: true,
    path: stickers[key].path,
  });
}

The following operations are mainly performed in this function:

• Get the span element in the message, which will serve as the animation container for lottie.
• Set the width and height of the expression animation to 40px.
• Use lottie to load the animation, and set loop play to false and auto play to true to automatically play the animation when the emoticon is sent, and only play it once.

Now you can send emoji messages, and the related animations will play automatically. Next, let’s see how to implement the full-screen animation of the bomb and the shaking effect of the message elements.

Send emoticons with full-screen effects

For this type of emoticon with full-screen special effects, you can judge it separately, or you can define related operations in the object that saves the emoticon. Here, for the sake of simplicity, we will judge whether the user has sent a bomb emoticon separately, and then apply the corresponding special effects.

First, in the appendMsg() function, a judgment is made. If the message sent is an emoticon message and the emoticon is a bomb, a full-screen animation is played and the message is shaken:

function appendMsg(msg, type) {
  if (type === "sticker") {
    playSticker(msg, msgEle);
    if (msg === "bomb") {
      // Play explosion animation setTimeout(() => {
        playExplosion(msgEle);
      }, 800);
      // Shake message list shakeMessages();
    }
  }
}

Here, the full-screen explosion animation is delayed by 800 milliseconds before execution. The purpose is to play the full-screen animation when the bomb expression plays to the appropriate time. The playExplosion() function is used to play the animation, and the message element is passed into it. After the explosion full screen animation is finished, call shakeMessages() to shake the messages. Here is the code of the playExplosion() function:

function playExplosion(anchor) {
  const explosionAnimeEle = anchor.appendChild(document.createElement("div"));
  explosionAnimeEle.style.position = "absolute";
  explosionAnimeEle.style.width = "200px";
  explosionAnimeEle.style.height = "100px";
  explosionAnimeEle.style.right = 0;
  explosionAnimeEle.style.bottom = 0;
  const explosionPlayer = lottie.loadAnimation({
    container: explosionAnimeEle,
    renderer: "svg",
    loop: false,
    autoplay: true,
    path: "./9990-explosion.json",
  });
  explosionPlayer.setSpeed(0.3);
  // After the playback is completed, destroy the explosion-related animations and elements explosionPlayer.addEventListener("complete", () => {
    explosionPlayer.destroy();
    explosionAnimeEle.remove();
  });
}

The playExplosion() function receives an anchor, which is the position at which the full-screen animation starts. Since the animation in this example is relatively small, it is fixed below the latest message sent. Here, the anchor of the explosion animation is the message element. The function then performs the following operations:

• Add a full-screen animation element, set it to absolute positioning, 200px width, 100px height, and place it in the lower right corner of the latest news element.
• Load lottie animation, no loop, autoplay.
• Since the original animation speed is too fast, the setSpeed() method of the lottie instance is called here to set the speed to 0.3 times.
• Then set the event listener for the Lottie instance: "complete", which will be triggered when the animation is completed, and the Lottie instance and the full-screen animation element will be destroyed.

In this way, the full-screen animation effect is achieved. Next, let’s look at the code for message shaking:

function shakeMessages() {
  [...panelEle.children]
    .reverse()
    .slice(0, 5)
    .forEach((messageEle) => {
      const avatarEle = messageEle.querySelector("img");
      const msgContentEle = messageEle.querySelector("p");
      avatarEle.classList.remove("shake");
      msgContentEle.classList.remove("shake");
      setTimeout(() => {
        avatarEle.classList.add("shake");
        msgContentEle.classList.add("shake");
      }, 700);
    });
}

The operation of this function is:

• Use reverse() and slice() to shuffle the latest 5 messages. You can also make 5 larger to shuffle more messages.
• Then in the loop, add the shake class to the avatar and message to perform the shaking animation. The content of this class will be introduced later.
• It should be noted that before adding the shake class to perform the animation, you need to delete the shake first, because some messages may have been shaken before, such as when multiple bomb emojis are sent continuously. When adding the shake class later, setTimeout() was used to delay for 700 milliseconds. The purpose was to shake the message when the full-screen animation was executed to a certain extent.

Next, let’s look at the definition of shake class and add the following code to style.css:

.shake {
  animation: shake 0.8s ease-in-out;
}
@keyframes shake {
  from {
    transform: translate3d(0, 0px, 0px);
  }
  10% {
    transform: translate3d(6px, -6px, 0px);
  }
  20% {
    transform: translate3d(-5px, 5px, 0px);
  }
  30% {
    transform: translate3d(4px, -4px, 0px);
  }
  35% {
    transform: translate3d(-3px, 3px, 0px);
  }
  39% {
    transform: translate3d(2px, -2px, 0px);
  }
  41% {
    transform: translate3d(-1px, 1px, 0px);
  }
  42% {
    transform: translate3d(0px, 0px, 0px) rotate(20deg);
  }
  52% {
    transform: rotate(-15deg);
  }
  60% {
    transform: rotate(8deg);
  }
  65% {
    transform: rotate(-3deg);
  }
  67%
    transform: rotate(1deg);
  }
  70% {
    transform: rotate(0deg);
  }
  to {
    transform: translate3d(0px, 0px, 0px) rotate(0);
  }
}

The animation defined by shake keyframes is used in .shake , with an execution time of 0.8s and an animation execution function of ease-in-out. There are a lot of codes in the keyframes, but they are all very simple. They simulate the effect of an explosion and move the x-axis and y-axis offsets. Each time the offset amplitude becomes smaller and faster, you can see that the percentage intervals are getting smaller and smaller. At 42% of the animation, some rotation animation was added to create a vibration effect when landing. Since the axis of rotation when using rotate() is in the middle of the element, we can modify the axis of the message bubble to achieve a more realistic effect:

.message p {
  transform-origin: left bottom;
}
.message.mine p {
  transform-origin: right bottom;
}

Here, the axis of the message sent by the other party is set in the lower left corner, and the message sent by yourself is set in the lower right corner.

Summarize

Now, the function of simulating WeChat 8.0 animated emoticons has been realized. The main points are as follows:

• Use the lottie library to load and play animations.
• Determines the position and timing of full-screen animations.
• CSS implementation of message shaking animation.

Have you learned it? If you have any questions or suggestions, please leave a comment. If you like this article, please like it or follow me. There will be more exciting articles later. Thank you!

Author: Fenghua, Introduction: Front-end engineer, shares programming knowledge in an intuitive and professional way. Bilibili UP@Fenghua Front-end Engineer

All addresses in this article:

Example address: https://codechina.csdn.net/mirrors/zxuqian/html-css-examples

Code address: https://codechina.csdn.net/mirrors/zxuqian/html-css-examples/-/tree/master/31-05-wechat-emoji-effect

lottie: https://cdnjs.com/libraries/bodymovin , download lottie.min.js

Pumpkin Emoticon: https://lottiefiles.com/43215-pumpkins-sticker-4

Bomb emoticon: https://lottiefiles.com/3145-bomb

Explosion animation: https://lottiefiles.com/9990-explosion

Lottie official website: https://airbnb.io/lottie

This is the end of this article about how to use more than 300 lines of CSS code to achieve the explosive special effects of WeChat 8.0. For more relevant WeChat 8.0 explosive special effects content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!