css3加载动画小点闪烁怎么做的

html-css037

css3加载动画小点闪烁怎么做的,第1张

用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}

}

@-webkit-keyframes twinkling{

  0% {

      opacity: 0 

  }

  100% {

      opacity: 1 

  }

}

#110 {

    -webkit-animation: twinkling 1s infinite ease-in-out 

}

参考如上。

稍微解释一下，定义两个状态，一种状态下透明度为 0%，另一种状态下透明度为 100%，无限次地在 1 秒内切换这两种状态，看起来就是闪烁了。

最近在用element ui做后台管理系统，左侧菜单比较多了，所以需要拉动网页滚动条才可以看完整个菜单，

所以就把顶部导航浮动 fixed后 到一定高度就浮动起来，

但是中途遇到一个大坑，就是在浏览器中，滚动发高度刚好在导航需要浮动的高度山下不断 上下滑动滚动条的时候 ，页面会出现不断的闪烁，不知道大家有没有遇到个这样的bug

好了 不批话多了，直接看解决方法

重点来了。。。。。。。。

尼玛重点在那点啊。。

接到往下来 就是在我浮动的导航div外面在包一层div 就觉得了