[分享]css3微信对话动画

CSS3微信对话动画是一种非常流行的动效，它结合了CSS3的强大特性和微信聊天窗口的交互方式，使得整个动画效果更加生动、逼真。下面我们来看看如何实现这样一种动画效果。 .chatbox { width...

CSS3微信对话动画是一种非常流行的动效，它结合了CSS3的强大特性和微信聊天窗口的交互方式，使得整个动画效果更加生动、逼真。下面我们来看看如何实现这样一种动画效果。

 .chat-box {
        width: 300px;
        height: 400px;
        background-color: #f5f5f5;
        padding: 10px;
        border-radius: 10px;
        overflow-y: scroll;
        position: relative;
    }

    .message {
        max-width: 60%;
        background-color: #FFF;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 10px;
        position: relative;
    }

    .message:before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        left: -10px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid #FFF;
    }

    .message:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        right: -10px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid #FFF;
    }

    .message.left:before {
        display: none;
    }

    .message.right:after {
        display: none;
    }

    .message.left {
        float: left;
    }

    .message.right {
        float: right;
    } 

以上代码是完成微信对话框的基本样式，其中包括对话框框架的样式和发送消息框的样式。

接下来，我们需要使用JavaScript来实现对话的功能。

 let sendBtn = document.getElementById('send');
    let input = document.getElementById('input');
    let chatBox = document.getElementById('chat-box');

    sendBtn.addEventListener('click', function () {
        let val = input.value;

        if (val.trim()) {
            let message = document.createElement('div');
            message.innerText = val;
            message.classList.add('message');
            message.classList.add('right');
            chatBox.appendChild(message);

            input.value = "";

            setTimeout(function () {
                let response = document.createElement('div');
                response.innerText = '我收到了你的消息';
                response.classList.add('message');
                response.classList.add('left');
                chatBox.appendChild(response);
            }, 1000)
        }
    }) 

以上是JavaScript代码的实现过程，当用户输入消息并点击发送按钮后，会在页面上生成一个新的消息框。同时，使用setTimeout模拟回复效果（1秒后在页面上出现“我收到了你的消息”的回复框）。

最后，同时运用CSS3和JavaScript，我们就完成了一个具有微信对话框功能的动效。