效果演示地址:点击这里
静态图:
步骤:
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>
微 信 小 尾 巴
微 信 小 尾 巴
学废了,学废了 微 信 小 尾 巴
试试
微 信 小 尾 巴
你这个看着好高级,比我们以前的好看