效果演示地址:点击这里
静态图:
步骤:
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>
<span style=" <span style=" <span style=" <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, 251, 239);
border: 1px solid rgb(183, 237, 177);
">微</span>
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>
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>
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>
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>
酸奶有写浏览器插件的。
<span style=" border-radius:50%;
animation: rotate 2s linear infinite;
color: #FFF;
background-color: blue;
border: 1px solid rgb(205, 178, 250);
">这 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>
font-size: 10px;
height: 50px;
width: 50px;
align-items: center;
justify-content: center;
display: inline-flex;
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); ">?