css动画之波纹

样式定义：

#ContactAbout { height: auto; position: relative; overflow: hidden; }
#sectioncontact { display: block; width: %; position: relative; height: 700px; z-index: ; }
    #sectioncontact .map { width: 370px; height: 280px; position: absolute; left: %; margin-left: -105px; }
        #sectioncontact .map .button { width: 73px; height: 63px; background: url(../images/map-button.png) no-repeat; position: absolute; bottom: 0px; left: 165px; z-index: ; border-radius: 73px; }
        #sectioncontact .map .tips { width: 370px; height: 170px; background: rgba(,,,.); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; position: absolute; left: 20px; 

top: 16px; z-index: ; -webkit-animation: Swing 2s ease-in-out infinite; -moz-animation: Swing 2s ease-in-out infinite; -ms-animation: Swing 2s ease-in-out infinite; -o-animation: Swing 2s ease-in-out 

infinite; animation: Swing 2s ease-in-out infinite; }
            #sectioncontact .map .tips:before { content: ''; border: 26px solid; border-color: #; border-color: rgba(,,,); border-top-color: rgba(,,,.); position: absolute; left: %; 

top: 170px; margin-left: -26px; }
            #sectioncontact .map .tips .container { padding: 10px; color: #fff; font-size: 16px; font-weight: ; line-height: 30px; }
                #sectioncontact .map .tips .container small { display: inline-block; width: 80px; color: #eee; font-size: 14px; }
@-webkit-keyframes Swing {
    % { -webkit-transform: rotate(0deg); }
    % { -webkit-transform: rotate(-2deg); }
    % { -webkit-transform: rotate(2deg) scaleY(); }
    % { -webkit-transform: rotate(-2deg); }
    % { -webkit-transform: rotate(1deg); }
    % { -webkit-transform: rotate(-1deg); }
    % { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes Swing {
    % { -moz-transform: rotate(0deg); }
    % { -moz-transform: rotate(-2deg); }
    % { -moz-transform: rotate(2deg) scaleY(); }
    % { -moz-transform: rotate(-2deg); }
    % { -moz-transform: rotate(1deg); }
    % { -moz-transform: rotate(-1deg); }
    % { -moz-transform: rotate(0deg); }
}

@-ms-keyframes Swing {
    % { -ms-transform: rotate(0deg); }
    % { -ms-transform: rotate(-2deg); }
    % { -ms-transform: rotate(2deg) scaleY(); }
    % { -ms-transform: rotate(-2deg); }
    % { -ms-transform: rotate(1deg); }
    % { -ms-transform: rotate(-1deg); }
    % { -ms-transform: rotate(0deg); }
}

@keyframes Swing {
    % { transform: rotate(0deg); }
    % { transform: rotate(-2deg); }
    % { transform: rotate(2deg) scaleY(); }
    % { transform: rotate(-2deg); }
    % { transform: rotate(1deg); }
    % { transform: rotate(-1deg); }
    % { transform: rotate(0deg); }
}

.halo { -webkit-animation: Halo 6s linear infinite; -moz-animation: Halo 6s linear infinite; animation: Halo 6s linear infinite; }

@-webkit-keyframes Halo {
    % { box-shadow: inset   25px rgba(,,,0.25),    rgba(,,,),    rgba(,,,),    rgba(,,,); }
    % { box-shadow: inset   25px rgba(,,,0.25),    rgba(,,,.),   200px rgba(,,,.),    rgba(,,,.),   460px rgba(,,,.); }
    % { box-shadow: inset   25px rgba(,,,.),    rgba(,,,.),   200px rgba(,,,),   100px rgba(,,,),   1000px rgba(,,,); }
}

@-moz-keyframes Halo {
    % { box-shadow: inset   25px rgba(,,,0.25),    rgba(,,,),    rgba(,,,),    rgba(,,,); }
    % { box-shadow: inset   25px rgba(,,,0.25),    rgba(,,,.),   200px rgba(,,,.),    rgba(,,,.),   460px rgba(,,,.); }
    % { box-shadow: inset   25px rgba(,,,.),    rgba(,,,.),   200px rgba(,,,),   100px rgba(,,,),   1000px rgba(,,,); }
}

@keyframes Halo {
    % { box-shadow: inset   25px rgba(,,,0.25),    rgba(,,,),    rgba(,,,),    rgba(,,,); }
    % { box-shadow: inset   25px rgba(,,,0.25),    rgba(,,,.),   200px rgba(,,,.),    rgba(,,,.),   460px rgba(,,,.); }
    % { box-shadow: inset   25px rgba(,,,.),    rgba(,,,.),   200px rgba(,,,),   100px rgba(,,,),   1000px rgba(,,,); }
}

aspx:

<div id="ContactAbout">
                        <div id="sectioncontact">
                            <div class="baidumapsite" id="dituContent"></div>
                            <div class="map">
                                <div class="tips">
                                    <div class="container">
                                        <p><small>公司名称：</small><asp:Literal ID="cName" runat="server"></asp:Literal></p>
                                        <p><small>公司邮箱：</small><asp:Literal ID="cEmail" runat="server"></asp:Literal></p>
                                        <p><small>联系手机：</small><asp:Literal ID="cTel" runat="server"></asp:Literal></p>
                                        <p><small>公司邮编：</small><asp:Literal ID="cPostcode" runat="server"></asp:Literal></p>
                                        <p><small>公司地址：</small><asp:Literal ID="cAddr" runat="server"></asp:Literal></p>
                                    </div>
                                </div>
                                <div class="button halo"></div>
                            </div>

                            <div id="messageus" title="点击给我留言吧"></div>
                            <div id="pop-login" style="display: none">

                                <div class="subline">
                                    <span>客户姓名：</span>
                                    <input name="txtName" runat="server" type="text" id="txtName" class="txtinput" />
                                </div>
                                <div class="subline">
                                    <span>邮箱地址：</span>
                                    <input name="txtEmail" runat="server" type="text" id="txtEmail" class="txtinput" />
                                </div>
                                <div class="subline">
                                    <span>联系电话：</span>
                                    <input name="txtTel" runat="server" type="text" id="txtTel" class="txtinput" />
                                </div>
                                <div class="subcontent">
                                    <span>留言内容：</span>
                                    <textarea name="txtMsgContent" id="txtMsgContent" runat="server" class="txtMsgContent" />
                                </div>
                                <div class="subline">
                                    <span>验证码：</span>
                                    <img src="VerifyImage.ashx" class="txtverity" onclick="this.src=this.src+'?'" />
                                    <input name="txtCode" runat="server" type="text" id="txtCode" class="txtinput1" />
                                    <asp:Button ID="Button1" runat="server" Text="提交" OnClientClick="return check()" class="btn" OnClick="btnSendMsg_Click" />
                                </div>
                            </div>
                            <script type="text/javascript" src="js/baidumap.js"></script>
                        </div>
                    </div>

页面效果：