css svg 加载动画

<div class="el-loading-mask is-fullscreen">

<div class="el-loading-spinner">

<svg viewBox="25 25 50 50" class="circular">

<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>

</svg>

<p class="el-loading-text">Loading…</p>

</div>

</div>

/* ******************* 加载动画 **************************** */

.el-loading-mask.is-fullscreen { position: fixed}

.el-loading-mask { background-color: hsla(0,0%,100%,.4)!important}

.el-loading-mask { position: absolutez-index: 10000background-color: hsla(0,0%,100%,.9)margin: 0top: 0right: 0bottom: 0left: 0transition: opacity .3s}

.el-loading-mask.is-fullscreen .el-loading-spinner { margin-top: -25px}

.el-loading-spinner { top: 50%margin-top: -21pxwidth: 100%text-align: centerposition: absolute}

.el-loading-mask.is-fullscreen .el-loading-spinner .circular { width: 50pxheight: 50px}

.el-loading-spinner .circular { width: 42pxheight: 42pxanimation: loading-rotate 2s linear infinite}

svg:not(:root) { overflow: hidden}

.el-loading-spinner .el-loading-text { color: #ff495e !important}

.el-loading-spinner .el-loading-text { color: #20a0ffmargin: 3px 0font-size: 14px}

.el-loading-spinner .path { stroke: #ff495e !important}

.el-loading-spinner .path {

    animation: loading-dash 1.5s ease-in-out infinite

    stroke-dasharray: 90,150

    stroke-dashoffset: 0

    stroke-width: 2

    stroke: #20a0ff

    stroke-linecap: round

}

@keyframes loading-rotate {

to {

transform:rotate(1turn)

}

}@keyframes loading-dash {

0% {

stroke-dasharray:1,200

stroke-dashoffset:0

}

50% {

stroke-dasharray:90,150

stroke-dashoffset:-40px

}

to {

stroke-dasharray:90,150

stroke-dashoffset:-120px

}

/* ********************** 加载动画end  ***************************************************** */

在微信公众号文章中经常使用的微信公众号动画效果是怎么制作的？使用SVG编辑器就能搞定了！

什么是微信公众号黑科技动画排版？

黑科技动画排版是什么？为什么这么多的官号和品牌都在用？

黑科技排版是一种交互式的图文排版，读者通过触发热区，就能让微信公众号文章实现滑动、点击、展开、隐藏等等的效果，可以让文章和读者产生一定的互动，内容展示形式新奇，传播效果好，阅读量自然也就变高了。

微信公众号SVG动画排版教程

这样的SVG黑科技排版可以在135编辑器推出的SVG编辑器中进行制作，来看看下面的排版 *** 作教程吧。

在135编辑器中，点击左侧功能区的【SVG编辑器】，打开SVG编辑器界面

首先在左侧的素材栏搜索或筛选一个你想要的效果，点击将这个效果放入中间的编辑区

在右侧为该效果上传所需的图片、链接或视音频素材，一个SVG动画效果就做好了

预览一下动画效果无误后，使用授权同步功能，将SVG文章同步到公众号就可以进行发布了

或者使用导出功能，将SVG动态图文保存到微信公众号平台

大家都学会了吗？SVG编辑器还有更多大牌同款的经典SVG图文素材，赶快上手，开启你的黑科技排版吧！

-  END  -

---