公衆號個性化網頁

改變透明度效果

微信公衆號HTML標籤都有哪些玩法?
在這裏插入圖片描述

<center>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="35%" y="20" fill="#898989" font-family="microsoft yahei,sans-serif" font-weight="bold" font-size="14">
前方還有高能!! <animate attributename="opacity" from="1" to="0" begin="0s" dur="1.2s" repeatcount="indefinite"></animate>
</text>
<text x="35%" y="40" fill="#767676" font-family="microsoft yahei,sans-serif" font-weight="bold" font-size="14">
前方還有高能!! <animate attributename="opacity" from="1" to="0" begin="0.2s" dur="1.2s" repeatcount="indefinite"></animate>
</text>
<text x="35%" y="60" fill="#646464" font-family="microsoft yahei,sans-serif" font-weight="bold" font-size="14">
前方還有高能!! <animate attributename="opacity" from="1" to="0" begin="0.4s" dur="1.2s" repeatcount="indefinite"></animate>
</text>
<text x="35%" y="80" fill="#333333" font-family="microsoft yahei,sans-serif" font-weight="bold" font-size="14">
前方還有高能!! <animate attributename="opacity" from="1" to="0" begin="0.6s" dur="1.2s" repeatcount="indefinite"></animate>
</text>
<text x="35%" y="100" fill="#000000" font-family="microsoft yahei,sans-serif" font-weight="bold" font-size="14">
前方還有高能!! <animate attributename="opacity" from="1" to="0" begin="0.8s" dur="1.2s" repeatcount="indefinite"></animate>
</text>
</svg>
</center>

背景顏色

在這裏插入圖片描述

<section data-mpa-template="t" data-mpa-category="背景" 
style="background-color: rgb(240, 255, 250);" data-mpa-powered-by="yiban.io">
  <p>green
  </p>
</section>

背景圖片

在這裏插入圖片描述

<section data-mpa-template="t" data-mpa-category="背景" style="background-image:
 url(&quot;https://mmbiz.qlogo.cn/mmbiz_png/n0PNa0viaIhTDMibibnJqhAjMt0vpn2VxgPPNUB3CvaFvKWAtvcCes2Vic01gUEUeSXwJxxblZicUHvqmB74C6Tku7Q/0?wx_fmt=png&quot;);" data-mpa-powered-by="yiban.io">
  <section>

滾動條

在這裏插入圖片描述

<section style="overflow-y: scroll; height: 200px;">
  <p>滾動條測試
  </p>
 </section>

文字邊框與橫向排布

CSS 參考手冊
在這裏插入圖片描述

<div style="display: flex; justify-content: flex-end; flex-wrap: nowrap;" data-mpa-powered-by="yiban.io">
  <p style="border-style: double; border-color: rgb(200, 255, 238); border-width: 10px;">fd
  </p>
</div>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章