本篇教程探讨了如何实现向外发射的动画，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

 html

<div class="single">

    <div class="single_center"></div></div>

css

body{ background: #59d1b6;}.single_center {

    width: 20px;

    height: 20px;

    margin: 300px auto;

    border-radius: 100%;

    background: #fff;

    cursor: pointer;

    display: block;

    position: relative;

}.single_center:after {

    content: '';

    position: absolute;

    width: 120px;

    height: 120px;

    border-radius: 100%;

    background: rgba(255, 255, 255, 0.5);

    top: 50%;

    left: 50%;

    margin-top: -60px;

    margin-left: -60px;

    z-index: 4;

    opacity: 0;

    -webkit-animation: halo 2s 1.5s infinite ease;

    -moz-animation: halo 2s 1.5s infinite ease;

    animation: halo 2s 1.5s infinite ease;

}.single_center:before {

    content: '';

    position: absolute;

    width: 160px;

    height: 160px;

    border-radius: 100%;

    background: rgba(255, 255, 255, 0.3);

    top: 50%;

    left: 50%;

    margin-top: -80px;

    margin-left: -80px;

    z-index: 3;

    opacity: 0;

    -webkit-animation: halos 2s 1s infinite ease;

    -moz-animation: halos 2s 1s infinite ease;

    animation: halos 2s 1s infinite ease;

}

@-webkit-keyframes halos {

    0% {opacity: 0;-webkit-transform: scale(0.3);}

    50% {opacity: 1;}

    100% {opacity: 0;-webkit-transform: scale(1.2);}

}

@-moz-keyframes halos {

    0% {opacity: 0;-moz-transform: scale(0.1);}

    50% {opacity: 1;}

    100% {opacity: 0;-moz-transform: scale(1.2);}

}

@-ms-keyframes halos{

    0%{opacity:0}

    50%{opacity:1}

    100%{opacity:0}

}

@-o-keyframes halos{

    0%{opacity:0;-o-transform:scale(0.1)}

    50%{opacity:1}

    100%{opacity:0;-o-transform:scale(1.2)}

}

@keyframes halos{

    0%{opacity:0;transform:scale(0.1)}

    50%{opacity:1}

    100%{opacity:0;transform:scale(1.2)}

}

@-webkit-keyframes halo {

    0% {opacity: 0;-webkit-transform: scale(0.1);}

    50% {opacity: 1;}

    100% {opacity: 0;-webkit-transform: scale(1.2);}

}

@-moz-keyframes halo {

    0% {opacity: 0;-moz-transform: scale(0.1);}

    50% {opacity: 1;}

    100% {opacity: 0;-moz-transform: scale(1.2);}

}

@-ms-keyframes halo{

    0%{opacity:0}

    50%{opacity:1}

    100%{opacity:0}

}

@-o-keyframes halo{

    0%{opacity:0;-o-transform:scale(0.1)}

    50%{opacity:1}

    100%{opacity:0;-o-transform:scale(1.2)}

}

@keyframes halo{

    0%{opacity:0;transform:scale(0.1)}

    50%{opacity:1}

    100%{opacity:0;transform:scale(1.2)}

}

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML5/CSS3频道，获取更多WEB前端知识！