css圆圈闪烁特效

最新推荐文章于 2024-05-30 10:50:01 发布

bsh_csn

最新推荐文章于 2024-05-30 10:50:01 发布

阅读量1.1w

点赞数

分类专栏： html/css

本文链接：https://blog.csdn.net/bsh_csn/article/details/52785151

版权

html/css 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

css圆圈闪烁特效

-webkit-animation:仍旧是一个复合属性，

-webkit-animation: name duration timing-function delay iteration_count direction;

（1）  -webkit-animation-name    这个属性的使用必须结合@-webkit-keyframes一起使用

eg:  @-webkit-keyframes fontchange{

0%{font-size:10px;}

30%{font-size:15px;}

100%{font-siez:12px;}

}

百分比的意思就是duration的百分比，如果没有设置duration的话，则表示为无穷大
div{ -webkit-animation-name:fontchange;}   //fontchange是@-webkit-keyframes的name

（2）-webkit-animation-duration   表示动画持续的时间

（3）-webkit-animation-timing-function  表示动画使用的时间曲线

【语法】： -webkit-animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out

（4）-webkit-animation-delay    表示开始动画之前的延时

【语法】 -webkit-animation-delay: delay_time;

（5）-webkit-animation-iteration-count  表示动画要重复几次

【语法】-webkit-animation-iteration-count: times_number;

（6） -webkit-animation-direction   表示动画的方向

【语法】-webkit-animation-direction: normal(默认)  | alternate

normal  方向始终向前

alternate 当重复次数为偶数时方向向前，奇数时方向相反

【另外】跟animation有关的其他属性

（1）-webkit-animation-fill-mode : none (默认)| backwards | forwards | both  设置动画开始之前和结束之后的行为（测试结

果不是很清晰）

（2）-webkit-animation-play-state: running（默认） | paused  设置动画的运行状态

实例:

css样式:

#div1{width: 15px;height: 15px;border-radius: 50%;
    background:#ADADAD;float: left;
}
@-webkit-keyframes redanimations{
    0%{box-shadow:0 0 10px 2px rgba(191,2,2,.8);}
    50%{box-shadow:0 0 10px 2px rgba(191,2,2,.3);}
    100%{box-shadow:0 0 10px 2px rgba(191,2,2,.8);}
}
@-moz-keyframes redanimations{/* Firefox */
    0%{box-shadow:0 0 10px 2px rgba(191,2,2,.8);}
    50%{box-shadow:0 0 10px 2px rgba(191,2,2,.3);}
    100%{box-shadow:0 0 10px 2px rgba(191,2,2,.8);}
}
@keyframes redanimations{
    0%{box-shadow:0 0 10px 2px rgba(191,2,2,.8);}
    50%{box-shadow:0 0 10px 2px rgba(191,2,2,.3);}
    100%{box-shadow:0 0 10px 2px rgba(191,2,2,.8);}
}

js设置div样式:

function setCssStyle(circleName,bkg,anminationName){
        var border = "1px solid "+bkg;
        anmination = anminationName + " 2s ease infinite";

        $("#"+circleName).css({
            "border":border,
            "background":bkg,
            "-moz-animation":anmination,
            "-webkit-animation":anmination,
            "-o-animation":anmination,
            "-ms-animation":anmination,
            "animation":anmination
        });
    }


setCssStyle("div1","#FF0000","redanimations");