css svg 加载动画

html-css020

css svg 加载动画,第1张

<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  ***************************************************** */

用css做一个呼吸效果，然后让想闪烁的元素调用：

比如，我的div想呼吸

div.breatheDiv{

    height:500px

    width:500px

    background-color: #FF94A6

    border-radius: 100%

    webkit-animation: breathe 2000ms ease infinite

    -moz-animation: breathe 2000ms ease infinite

    -o-animation: breathe 2000ms ease infinite

    animation: breathe 2000ms ease infinite

}

@-webkit-keyframes breathe{

    0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}

    100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}

    50%{opacity:1box-shadow:0 1px 80px #ff6b84}

}

@-moz-keyframes breathe{

    0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}

    100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}

    50%{opacity:1box-shadow:0 1px 80px #ff6b84}

}

@-o-keyframes breathe{

    0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}

    100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}

    50%{opacity:1box-shadow:0 1px 80px #ff6b84}

}

@keyframes breathe{

    0% {opacity:.2box-shadow:0 1px 10px rgba(255,255,255,0.1)}

    100%{opacity:1box-shadow:0 1px 40px rgba(255,107,132,0.5)}

    50%{opacity:1box-shadow:0 1px 80px #ff6b84}

}

在onTransitionEnd(swiper) 或者 onSlideChangeEnd(swiper)回调中给当前页添加动画类，其他页移除动画类，其中 swiper.activeIndex 为当前活动块的索引。