微信网页开发活动（1024）

盘是一个好的习惯

1、通用函数的封装！

2、flex在移动端的布局

2.2 、css使点击事件失效

pointer-events:none;

3、php常用语法的熟悉情况

https://www.runoob.com/php/php-tutorial.html

变量超过8个显示...

  <?php echo mb_strlen($userInfo['nickname'],'utf-8') > 8 ? '...':'';?>2、最多显示8个长度名字  <?php echo mb_substr($userInfo['nickname'],0,8,'utf-8')?>3、if循环格式  <?php if ($question['answer_num']=='6') {?>                    AI之星                    <?php }elseif ($question['answer_num'] >='3' && $question['answer_num'] <='5') {?>                    AI勇士                    <?php }else{?>                    AI学者                <?php }?>

最多显示8个长度名字

<?php echo mb_substr($userInfo['nickname'],0,8,'utf-8')?>

当前的时间戳

<input type="hidden" name="nowtime" value="<?php echo  time() ?>" >

if循环格式

<?php if ($question['num']=='6') {?>
    明星
    <?php }elseif ($question['num'] >='3' && $question['num'] <='5') {?>
    勇士
    <?php }else{?>
    学者
<?php }?>

foreach 循环

<?php if ($question_list) {?>
    <?php foreach ($question_list as $key=> $m): ?>
        <div class="swiper-slide item">
            <section class="question-box" data-id="<?=$m['id']?>">
                <div class="q-title"><?=$m['question']?>
                </div>
                <?php if ($m['answerList']) {?>
                    <?php foreach ($m['answerList'] as $answer_key=> $answer): ?>
                        <label class="radio-label">
                            <input type="radio" data-type="single_choice" name="<?=$m['id']?>" value="<?=$answer_key?>">
                            <?=$answer?>
                        </label>
                    <?php endforeach; ?>
                <?php }?>
            </section>
        </div>
    <?php endforeach; ?>
<?php }?>
  
 //例子2
  <select name="column_id" value="<?=isset($show_info['column_id']) ? $show_info['column_id'] : '0'?>">
    <?php foreach($column_tree as $key=> $col) {?>
        <option value="<?=$key?>" <?=($show_info['column_id']==$key) ? 'selected="selected"' : ''?>><?=$col?></option>
    <?php }?>
   </select>

Twig一些常用到的语法

//倒序排列
{{ loop.revindex }}
//

4、为了更好的兼容，点击事件写在a标签上。

5、微信网页开发

//微信网页开发分享监听
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

<script>
var param=<?=$param ?>;
    (function () {
        wx.config({
            appId: '<?=$appid ?>',
            timestamp: param.timestamp,
            nonceStr: param.noncestr,
            signature: param.signature,
            jsApiList: [
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'onMenuShareQZone'
            ]
        });
        var shareContent={
                "title": "title文案",
                "link": "<?=site_url('knowledge/index?share_id='.$share_id);?>",
                "imgUrl": "<?=site_url('/static/img/ai.png');?>",
                "desc": "文案～～～"
            },
            $jShareWrap=$('.js_share-wrap'),
            $slActiveWrap=$('.sl-active_toast-wrap'),
            $questionPage=$('#question_page'),
            $inviteMask=$('.invite-mask'),
            succFnActive=function () {        
                $.ajax({
                    url: '/knowledge/share_ins_count',
                    type: 'get',
                    success: function (r) {
                        r=JSON.parse(r);
                        console.log(r.ret);
                        $jShareWrap.removeClass('show'); 
                        $slActiveWrap.text(r.msg).show();
                        if(r.ret==0){
                            $('.result-page .again-replay').removeClass('js_share_get_count');  
                            var hreflink=$('.result-page .again-replay').attr('data-type');  
                            console.log(hreflink);                    
                            $('.result-page .again-replay').attr('href',hreflink);
                         }
                        setTimeout(function(){
                            $slActiveWrap.text('').hide();
                            // if(r.ret==0){
                            //     window.location.reload();
                            // }
                        },2000);                      
                    },
                    error: function () {
                    }
                });
            };
        wx.ready(function () {
            wx.onMenuShareTimeline({
                title: shareContent.title,
                link: shareContent.link,
                imgUrl: shareContent.imgUrl,
                desc: shareContent.desc,              
                success: function (res) {
                    console.log('pyq');
                    succFnActive();
                },
                cancel: function (res) {
                  
                }
            });

            wx.onMenuShareAppMessage({
                title: shareContent.title,
                link: shareContent.link,
                imgUrl: shareContent.imgUrl,
                desc: shareContent.desc,
                success: function () {
                    console.log('py');
                    succFnActive();
                }
            });
            wx.onMenuShareQQ({
                title: shareContent.title,
                link: shareContent.link,
                imgUrl: shareContent.imgUrl,
                desc: shareContent.desc,
                success: function () {
                    // succFn();
                }
            });
            wx.onMenuShareQZone({
                title: shareContent.title,
                link: shareContent.link,
                imgUrl: shareContent.imgUrl,
                desc: shareContent.desc,
                success: function () {
                    // succFn();
                }
            });
        });
    })();
</script>


//遇见坑
1、如果生成的签名param中的url与当前链接不一致控制台会报错。
2、shareContent中的图片等保持同域名

6、时间戳的对比

<!-- 当前时间戳 -->
<input type="hidden" name="nowtime" value="<?php echo  time() ?>" >
  
 //js 当前时间大于活动结束时间
  if (Number($('input[name="nowtime"]').val()) >=Math.round(new Date('2020-10-25 10:00:00').getTime()/1000)) {
    $('.timeEndBox').text('活动已结束，感谢。').show();
    return false;
  };

7、合成海报html2canvas.min.js

html2canvas可以通过纯JS对浏览器端进行截屏，但截图的精确度还有待提高，部分css不可识别，所以在canvas中不能完美呈现原画面样式


//实例
function convertToPoster() {
    var $posterPageContent=$('#poster_page_content');
  ///这个地方只需要将useCORS设置成true，千万不要加allowTaint:true这两个不要同时加
    html2canvas($posterPageContent[0], {useCORS: true})
        .then(
            function (canvas) {
                var oImage=new Image();
// HTMLCanvasElement.toDataURL() 
//语法：canvas.toDataURL(type, encoderOptions);
// type为图片格式，默认为 image/png；encoderOptions为图片质量，默认为0.92
                oImage.src=canvas.toDataURL('image/png', 1);
                $(oImage)
                    .addClass('poster');
                $posterPageContent
                    .after(oImage)
                    .hide();
            }
        );
};

为了更清晰的前端合并图片

<img class="copyImage" src="">
<a id="dl-hidden" style="display:none;"></a>
window.onload=function(){
    var IMAGE_URL;
    function takeScreenshot(){
        var shareContent=document.getElementById('letter');//需要截图的包裹的（原生的）DOM 对象
        var width=shareContent.offsetWidth; //获取dom 宽度
        var height=shareContent.offsetHeight; //获取dom 高度
        var canvas=document.createElement("canvas"); //创建一个canvas节点

        var scale=3; //定义任意放大倍数 支持小数
        canvas.width=width * scale; //定义canvas 宽度 * 缩放
        canvas.height=height * scale; //定义canvas高度 *缩放
        canvas.getContext("2d").scale(scale,scale); //获取context,设置scale

        // var rect=shareContent.getBoundingClientRect();//获取元素相对于视察的偏移量
        // canvas.getContext("2d").translate(-rect.left,-rect.top);//设置context位置，值为相对于视窗的偏移量负值，让图片复位
        var opts={
            scale:scale, // 添加的scale 参数
            canvas:canvas, //自定义 canvas
            logging: true, //日志开关
            width:width, //dom 原始宽度
            height:height, //dom 原始高度
            backgroundColor: 'transparent',
        };
        html2canvas(shareContent, opts).then(function (canvas) {
            IMAGE_URL=canvas.toDataURL("image/png");
            $('.copyImage').attr('src',IMAGE_URL);
        })
    }

    function dataURLtoBlob(dataurl) {
        var arr=dataurl.split(','),
            mime=arr[0].match(/:(.*?);/)[1],
            bstr=atob(arr[1]),
            n=bstr.length,
            u8arr=new Uint8Array(n)
        while (n--) {
            u8arr[n]=bstr.charCodeAt(n)
        }
        return new Blob([u8arr], { type: mime })
    }

    function downloadBase64(dataUrl, filename) {
        var imageFile, href
        // const downloadLink=document.createElement('a')
        var downloadLink=document.getElementById('dl-hidden')
        try {
            var blob=dataURLtoBlob(dataUrl)
                var href=window.URL.createObjectURL(blob)
                downloadLink.download=filename
                downloadLink.href=href
                downloadLink.click()
        } catch (err) {
        } finally {
            if (href) {
                window.URL.revokeObjectURL(href)
            }
            // downloadLink.remove()
        }
    }
           // $(".letter-title").text('木子芳小芳');
            takeScreenshot();
            $("#save-local").click(function(e){
             downloadBase64(IMAGE_URL, 'zhengshu.png')
            })
}

8、计时器

  // 计时器
    var time_share=0;
    var timeStart=function () {
        var hour=0;
        var min=0;
        var sen=0;

        function showTime() {
             time_share ++;
            sen++;
            if (sen >=60) {
                min++;
                sen=0;
            }
            if (min >=60) {
                hour++;
                min=0;
            }
            if (hour >=12) {
                hour=0;
            }
            var dataStr="<span class='timespan'>" + (hour < 10 ? ("0" + hour) : hour) + "</span>:<span class='timespan'>" + (min < 10 ? ("0" + min) : min) + "</span>:<span class='timespan'>" + (sen < 10 ? ("0" + sen) : sen) + "</span>";
            $(".vtimeShow").html(dataStr);
        }
        setInterval(showTime, 1000);
       
    };

答题滑动轮播坑

-->答题滑动的时候，执行相关内容可以放在一个一个方法里，寻找合适时机触发
 //  答题页面的轮播交互
    var knowledgeSwiper;
    function handleStartDo() {
        knowledgeSwiper=new Swiper('.js_knowledge-swiper', {
            on: {
                //题目滑动
                slideChange: function () {
                    //slider的状态判断
                    if (knowledgeSwiper.isBeginning) {
                        $preSlider.addClass('disabled');
                    } else if (knowledgeSwiper.isEnd) {
                        $nextSlider.hide();
                        $submitPaper.show();
                    } else {
                        $preSlider.removeClass('disabled');
                        $submitPaper.hide();
                        $nextSlider.show();
                    };
                    $('#activeIndex').text(this.activeIndex + 1);
                }
            }
        });
        $('.js_pre-slider').off('click').on('click', function () {
            knowledgeSwiper.slidePrev();
        });
        $('.js_next-slider').off('click').on('click', function () {
            knowledgeSwiper.slideNext();
        });
    }; // 做题交互end

数据异步追加

//第一步--每条数据渲染的格式
function listHtmlRender(data, orderNum) {
        var htmlArr=[
            '<li>',
                '<span class="order">',
                    orderNum,
                '</span>',
                '<img src="' + data.headimgurl + '" class="avatar">',
                '<span class="nickname">',
                    data.nickname,
                '</span>',
                '<span class="time">'
                + '用时' + data.time_share + 's' +
                '</span>',
            '</li>'
        ];
        var htmlStr=htmlArr.join('');
        return htmlStr;
    };
//第二部ajax请求后的
for (var i=0; i < r.date.length; i++) {
  orderNum++;
  var listHtml=listHtmlRender(response.data[i], orderNum);
  $listBoxUl.append($(listHtml));
}

iframe适配

人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。

WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

预览及说明

视觉标准

下载及使用

1、微信关注“起点学院”服务号（扫描二维码立即关注）；

2、回复关键词“微信设计规范”至【起点学院】服务号后台即可获取下载地址。

下载后，只需要在页面中引入dist/style/weui.css或者dist/style/weui.min.css其中之一即可。例如:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<link rel="stylesheet" href="path/to/weui/dist/style/weui.min.css"/>
</head>
<body>
</body>
</html>

开发

git clone https://github.com/weui/weui.git
cd weui
npm install -g gulp
npm install
npm start

运行npm start命令，会监听src目录下所有文件的变更，并且默认会在8080端口启动服务器，然后在浏览器打开http://localhost:8080/example。

第三方扩展

文档

WeUI 说明文档参考 Wiki

License

The MIT License(http://opensource.org/licenses/MIT) 请自由地享受和参与开源

原文地址：https://github.com/weui/weui

信 8.0 更新的一大特色就是支持动画表情，如果发送的消息只有一个内置的表情图标，这个表情会有一段简单的动画，一些特殊的表情还有全屏特效，例如烟花表情有全屏放烟花的特效，炸弹表情有爆炸动画并且消息和头像也会随之震动。

近日，前端工程师华峰用300行代码实现微信表情包炸裂的特效，一起来看看做出来的效果吧：

据他描述：项目的核心是使用到了 lottie 动画库。

lottie 是 Airbnb 出品的、全平台（Web、Android、IOS、React Native）的动画库，它的特点在于能够直接播放使用 Adobe After Effects 制作的动画。设计师在 After Effects 中，利用 Bodymovin 插件把动画导出为 JSON 格式之后，开发者就能够通过相应平台的 SDK 进行播放。

发送普通消息——核心

发送普通消息时，用户在输入框输入完消息之后，点击发送，就会把该条消息追加到消息列表中，并清空输入框中的内容。那么这里先给发送按钮添加点击事件：

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

在事件处理函数中：

判断用户是否输入了消息。
如果输入了就追加到消息列表中。

来看一下 appendMsg() 函数的代码：

function appendMsg(msg, type) {
  // 创建消息元素
  const msgEle=panelEle.appendChild(document.createElement("div"));
  msgEle.classList.add("message", "mine"); // 设置为“我“发送的样式
  msgEle.innerHTML=`
    <img class="avatar" src="./me.png" alt="" />
    <p><span>${msg}</span></p>
  `;
  // 滚动到最新消息
  panelEle.scrollTop=panelEle.scrollHeight;
  msgInputEle.value="";
}

函数接收两个参数，msg 和 type，分别是要追加的消息内容和类型，type 为可选的，不传则认为是普通文本消息，如果传递了 "stickers" 则为表情消息，现在还用不到它。在这个函数中主要做了下面几件事情：

按照消息的 HTML 结构创建一个新的消息元素 msgEle，并追加到消息列表中。
把消息的样式设置为我发送的。
内部的元素分别为头像和文本消息，使用模板字符串的形式赋值给 msgEle 的 innerHTML 属性中，并在 <p> 中使用 msg 变量的值。
最后把滚动条滚动到最新的消息处，并清空输入框中的消息。

这样就可以发送普通的文本消息了。

发送动画表情

在发送动画表情之前，需要先加载动画表情。在 index.js 的最上方先定义表情名称和表情动画文件路径的键值对信息：

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

我们会根据 bomb 、 pumkin 这样的 key 来找到对应的动画路径。接着初始化弹出层中的表情以供用户选择：

// 初始化表情面板，也可以在表情选择窗弹出时再初始化
Object.keys(stickers).forEach((key)=> {
  const lottieEle=stickersEle.appendChild(document.createElement("span"));
  // 对每个表情创建 lottie 播放器
  const player=lottie.loadAnimation({
    container: lottieEle,
    renderer: "svg",
    loop: true,
    autoplay: false,
    path: stickers[key].path,
  });
  // 当选择表情时，发送消息，并设置类型为 sticker 表情消息
  lottieEle.addEventListener("click", ()=> {
    appendMsg(key, "sticker");
  });
  // 当鼠标划过时，播放动画预览
  lottieEle.addEventListener("mouseover", ()=> {
    player.play();
  });
  // 当鼠标划过时，停止动画预览
  lottieEle.addEventListener("mouseleave", ()=> {
    player.stop();
  });
});

这里的代码分别作了下边这些操作：

遍历存储表情信息的对象。
创建一个 lottie 的容器，使用 span 元素，因为 lottie 动画的播放器需要挂载到一个具体的 html 元素中。
调用 lottie 的 loadAnimation() 加载动画，它需要传递这样几个参数：

container: 播放器要挂载到的容器。
renderer：可以选择是使用 svg 还是 canvas 渲染动画。
loop: 是否循环播放，由于此处是在表情选择弹出层中预览动画，所以支持循环播放。
autoplay：是否自动播放，这里设置为了否，后边让它在鼠标划过时再播放动画。
path：动画 json 文件路径，直接从对象中获取。

loadAnimation() 会返回 lottie 的实例，把它保存在 player 中。

然后后边则注册了几个事件：

当 lottieEle 也就是表情被点击时，发送表情消息，给 appendMsg() 的 msg 参数设置为表情的 key，type 参数设置为 "sticker"。
当鼠标划过表情时，开始播放动画。
当鼠标划出表情时，停止动画。

接着给发送表情按钮添加事件，点击时，切换表情弹出层的显示状态：

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

这时点击发送表情按钮就可以看到表情选择弹出层了。现在还不能发送表情，因为还没在 appendMsg() 函数中处理，现在来修改一下它里边的代码。首先判断：如果是表情消息，则不在消息中的 <p> 元素里添加任何信息：

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

然后在它的下方，调用 playSticker() 函数来播放动画：

// 处理表情消息，播放相关动画
if (type==="sticker") {
  playSticker(msg, msgEle);
}

playSticker() 函数接收两个参数，一个是表情的 key，一个是消息元素。此时的 msg 变量的内容就是在 lottieEle 点击事件中传递过来的表情 key。函数中的代码如下：

function playSticker(key, msgEle) {
  // 表情消息，创建 lottie 动画
  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,
  });
}

在这个函数里主要做了下边几项操作：

获取消息中的 span 元素，它将作为 lottie 的动画容器。
设置表情动画的宽高为 40px。
使用 lottie 加载动画，并设置循环播放为 false，自动播放为 true，来让表情发送时自动播放动画，且只播放一次。

现在可以发送表情消息了，相关的动画也会自动播放，接下来看一下怎么实现炸弹的全屏动画和对消息元素的晃动效果。

发送带全屏特效的表情

对于这种带全屏特效的表情可以单独进行判断，也可以在保存表情的对象中定义相关的操作，这里为了简单起见，我们单独判断用户是否发送了炸弹表情，然后施加相应特效。

首先在 appendMsg() 函数里，进行判断，如果发送的消息是表情消息，且表情为炸弹，则播放全屏动画并晃动消息：

function appendMsg(msg, type) {
  if (type==="sticker") {
    playSticker(msg, msgEle);
    if (msg==="bomb") {
      // 播放爆炸动画
      setTimeout(()=> {
        playExplosion(msgEle);
      }, 800);
      // 晃动消息列表
      shakeMessages();
    }
  }
}

这里爆炸全屏动画延迟了 800 毫秒之后再执行，目的是在炸弹表情播放到合适的时间时，再播放全屏动画，播放动画使用了 playExplosion() 函数，并传递了消息元素进去。在爆炸全屏动画结束之后，调用 shakeMessages() 来晃动消息。这里先看一下 playExplosion() 函数的代码：

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);
  // 播放完成后，销毁爆炸相关的动画和元素
  explosionPlayer.addEventListener("complete", ()=> {
    explosionPlayer.destroy();
    explosionAnimeEle.remove();
  });
}

playExplosion() 函数接收一个 anchor 锚点，就是说基于哪个位置开始播放全屏动画，由于示例中的动画画幅比较小，所以把它固定在了最新发送的消息的下方，这里爆炸动画的 anchor 就是消息元素，之后函数做了下边的这些操作：

添加全屏动画元素，设置为绝对定位，宽度 200px，高度 100px，放在最新消息元素的右下角。
加载 lottie 动画，不循环、自动播放。
由于原动画速度过快，这里调用 lottie 实例的 setSpeed() 方法，把速度设置为 0.3 倍速。
之后给 lottie 实例设置事件监听："complete"，它会在动画执行完成时触发，里边销毁了 lottie 实例和全屏动画元素。

这样全屏动画的效果就实现了。接下来看消息晃动的代码：

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

这个函数的操作是：

使用 reverse() 和 slice() 对最新的 5 条消息进行晃动，也可以把 5 改大一点，对更多消息进行晃动。
然后在循环中，分别给头像和消息添加 shake class 执行晃动动画，这个 class 的内容稍后再介绍。
要注意的是，在添加 shake class执行动画前，需要先删除 shake，因为有的消息可能在之前已经晃动过了，例如当连续发了多个炸弹表情时。后边在添加 shake class 时，使用 setTimeout() 延迟了 700 毫秒，目的是在全屏动画执行到一定程度时再晃动消息。

接下来看一下 shake class 的定义，在 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);
  }
}

.shake 中使用了 shake keyframes 定义的动画，执行时间为 0.8s，动画执行函数为 ease-in-out。Keyframes 里的代码比较多，但是都是很简单的，就是模拟了爆炸时的效果，移动 x 轴和 y 轴的偏移，每次的偏移幅度越来越小，并且越来越快，可以看到百分比的间隔越来越小。在动画进行到 42% 的时候，加了一些旋转动画，这样就有了落地时的震动效果。由于使用 rotate() 旋转时的轴心在元素中间，我们可以把消息气泡的轴心修改一下来实现更真实的效果：

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

这里把对方发送的消息的轴心设置在左下角，自己发送的消息则设置在了右下角。

本文所有地址：

示例地址：https://codechina.csdn.net/mirrors/zxuqian/html-css-examples
代码地址：https://codechina.csdn.net/mirrors/zxuqian/html-css-examples/-/tree/master/31-05-wechat-emoji-effect
lottie: https://cdnjs.com/libraries/bodymovin ，下载 lottie.min.js
南瓜表情：https://lottiefiles.com/43215-pumpkins-sticker-4
炸弹表情：https://lottiefiles.com/3145-bomb
爆炸动画：https://lottiefiles.com/9990-explosion
Lottie 官网：https://airbnb.io/lottie

总结

现在，这个模拟微信 8.0 动画表情的功能就实现了。主要就是下边几点：

使用 lottie 库加载并播放动画。
确定全屏动画的位置和播放时间。
消息晃动动画的 CSS 实现。

那么问题来了，作为编程界大佬的C语言能否实现微信对话框爆炸特效呢？这个需要大家一起探索！小编相信C语言的强大，是完全可以做到的，甚至更加简单，期待各位小伙伴一起讨论~

如果你对学习编程有兴趣，也想有一天别人使用你开发的软件或小程序、小特效，没基础也完全不用担心，因为机会来了，点击下方的了解更多链接，开启你的编程之旅~

在这里我们有什么？

1、海量学习资源

2、名师一对一指导

3、同行之间的相互切磋

4、外包项目拿到手软

心动不如行动，赶紧点击下方了解更多免费领取你的专属福利吧~

在线咨询

上一篇：逆世轮回 – 为网络小说《仙逆》量身定制
下一篇：如何在SAP登录页面添加信息

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商