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

发布网友 发布时间：2022-04-24 00:17

我来回答

共1个回答

热心网友 时间：2022-04-28 14:08

用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:.2;box-shadow:0 1px 10px rgba(255,255,255,0.1)}
    100%{opacity:1;box-shadow:0 1px 40px rgba(255,107,132,0.5)}
    50%{opacity:1;box-shadow:0 1px 80px #ff6b84}
}
@-moz-keyframes breathe{
    0% {opacity:.2;box-shadow:0 1px 10px rgba(255,255,255,0.1)}
    100%{opacity:1;box-shadow:0 1px 40px rgba(255,107,132,0.5)}
    50%{opacity:1;box-shadow:0 1px 80px #ff6b84}
}
@-o-keyframes breathe{
    0% {opacity:.2;box-shadow:0 1px 10px rgba(255,255,255,0.1)}
    100%{opacity:1;box-shadow:0 1px 40px rgba(255,107,132,0.5)}
    50%{opacity:1;box-shadow:0 1px 80px #ff6b84}
}
@keyframes breathe{
    0% {opacity:.2;box-shadow:0 1px 10px rgba(255,255,255,0.1)}
    100%{opacity:1;box-shadow:0 1px 40px rgba(255,107,132,0.5)}
    50%{opacity:1;box-shadow:0 1px 80px #ff6b84}
}