<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}
}
需要js配合用js给元素添加删除class来控制元素的现实和隐藏这个会把
你只需要在页面加载完成后执行js
给你要添加动画的元素上加一个 例如play的class
然后你所有css3的动画 都是基于play这个class 的 就行了
