如何在微信开放社区评论中添加小尾巴?
发布于 4 年前 作者 kongtao 1532 次浏览 来自 分享

效果演示地址:点击这里

静态图:

步骤:
1.点击评论,输入一点文字。
2.复制下方代码。
3.光标对着评论框里的文字右键-检查。
4.对着控制台里的标签右键-Edit as HTML
5.粘贴刚才的代码。
6.发布评论即可查看效果。

<p
  style="
    display: flex;
    text-align: left;
    border-top: 0.5px solid rgba(0, 0, 0, 0.06);
    padding: 25px;
    margin-top: 15px;
  "
>
  <span
    style="
      position: relative;
      font-size: 10px;
      height: 50px;
      width: 50px;
      align-items: center;
      justify-content: center;
      display: inline-flex;
      animation: rotate 2s linear infinite;
      color: #777272;
      background-color: rgb(240, 251, 239);
      border: 1px solid rgb(183, 237, 177);
    "
    ></span
  >
  <span
    style="
      position: relative;
      font-size: 10px;
      height: 50px;
      width: 50px;
      align-items: center;
      justify-content: center;
      display: inline-flex;

      animation: rotate 2s linear infinite;
      color: #777272;
      background-color: rgb(246, 241, 254);
      border: 1px solid rgb(205, 178, 250);
    "
    ></span
  >
  <span
    style="
      position: relative;
      font-size: 10px;
      height: 50px;
      width: 50px;
      align-items: center;
      justify-content: center;
      display: inline-flex;

      animation: rotate 2s linear infinite;
      color: #777272;
      background-color: rgb(255, 245, 235);
      border: 1px solid rgb(254, 212, 164);
    "
    ></span
  >
  <span
    style="
      position: relative;
      font-size: 10px;
      height: 50px;
      width: 50px;
      align-items: center;
      justify-content: center;
      display: inline-flex;

      animation: rotate 2s linear infinite;
      color: #777272;
      background-color: rgb(254, 241, 241);
      border: 1px solid rgb(251, 191, 188);
    "
    ></span
  >
  <span
    style="
      position: relative;
      font-size: 10px;
      height: 50px;
      width: 50px;
      align-items: center;
      justify-content: center;
      display: inline-flex;

      animation: rotate 2s linear infinite;
      color: #777272;
      background-color: rgb(240, 244, 255);
      border: 1px solid rgb(186, 206, 253);
    "
    ></span
  >
</p>
3 回复

font-size: 10px; height: 50px; width: 50px; align-items: center; justify-content: center; display: inline-flex; animation: rotate 2s linear infinite; color: #777272; background-color: rgb(240, 251, 239); border: 1px solid rgb(183, 237, 177); ">微</span>

<span style="

  font-size: 10px;
  height: 50px;
  width: 50px;
  align-items: center;
  justify-content: center;
  display: inline-flex;

  animation: rotate 2s linear infinite;
  color: #777272;
  background-color: rgb(246, 241, 254);
  border: 1px solid rgb(205, 178, 250);
 ">信</span>

<span style="

  font-size: 10px;
  height: 50px;
  width: 50px;
  align-items: center;
  justify-content: center;
  display: inline-flex;

  animation: rotate 2s linear infinite;
  color: #777272;
  background-color: rgb(255, 245, 235);
  border: 1px solid rgb(254, 212, 164);
 ">小</span>

<span style="

  font-size: 10px;
  height: 50px;
  width: 50px;
  align-items: center;
  justify-content: center;
  display: inline-flex;

  animation: rotate 2s linear infinite;
  color: #777272;
  background-color: rgb(254, 241, 241);
  border: 1px solid rgb(251, 191, 188);
 ">尾</span>

<span style="

  font-size: 10px;
  height: 50px;
  width: 50px;
  align-items: center;
  justify-content: center;
  display: inline-flex;

  animation: rotate 2s linear infinite;
  color: #777272;
  background-color: rgb(240, 244, 255);
  border: 1px solid rgb(186, 206, 253);
 ">巴</span>

酸奶有写浏览器插件的。

font-size: 10px; height: 50px; width: 50px; align-items: center; justify-content: center; display: inline-flex; animation: rotate 2s linear infinite; color: #FFF; background-color: red; border: 1px solid rgb(183, 237, 177); border-radius:50%; ">是</span>

<span style="

  font-size: 10px;
  height: 50px;
  width: 50px;
  align-items: center;
  justify-content: center;
  display: inline-flex;

border-radius:50%; animation: rotate 2s linear infinite; color: #FFF; background-color: blue; border: 1px solid rgb(205, 178, 250); ">这 <span style="

  font-size: 10px;
  height: 50px;
  width: 50px;
  align-items: center;
  justify-content: center;
  display: inline-flex;

border-radius:50%; animation: rotate 2s linear infinite; color: #FFF; background-color: green; border: 1px solid rgb(254, 212, 164); ">样 <span style="

  font-size: 10px;
  height: 50px;
  width: 50px;
  align-items: center;
  justify-content: center;
  display: inline-flex;

border-radius:50%; animation: rotate 2s linear infinite; color: #FFF; background-color: pink; border: 1px solid rgb(251, 191, 188); ">吗 <span style="

  font-size: 10px;
  height: 50px;
  width: 50px;
  align-items: center;
  justify-content: center;
  display: inline-flex;

border-radius:50%; animation: rotate 2s linear infinite; color: #FFF; background-color: yellow; border: 1px solid rgb(186, 206, 253); ">?

你这个看着好高级,比我们以前的好看

回到顶部