ie9不兼容css3实现的loading加载动画怎么解决

html-css017

ie9不兼容css3实现的loading加载动画怎么解决,第1张

最好的解决办法就是用个GIF动画代替,这样即使是最古老的浏览器都没有问题,而且运行效率与css3实现的动画不相上下。

这要看你的网页侧重于哪种浏览设备。如果是主要用于移动设备如手机上的浏览器的,可以放心大胆地使用css3的特效,因为几乎所有智能手机上的浏览器都是支持css3标准的;如果是主要用于电脑的,则尽量避免使用css3中的新特性,改用最兼容、最稳妥的方法,因为它面对的是形形色色、标准极其不统一的多种浏览器;如果是手机和电脑都要兼顾到的网页,则也要坚持“就低不就高”的原则,在兼容性与炫酷之间选择前者。

需要js配合

用js给元素添加删除class来控制元素的现实和隐藏这个会把

你只需要在页面加载完成后执行js

给你要添加动画的元素上加一个 例如play的class

然后你所有css3的动画 都是基于play这个class 的 就行了

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

}