css3 自动变大变小缩放按钮，css扩散效果

 

 

 

样式1：

<style>
            #Jsubmit.btn_gdj_design {
                -webkit-animation: free_download1 3s linear alternate infinite;
                animation: free_download1 3s linear alternate infinite;
            }

            .btn-submit {
                background: #206cfe;
                height: 45px;
                line-height: 45px;
                display: block;
                width: 90%;
                border-radius: 45px;
                font-size: 18px;
                padding: 0;
                border: 0;
                margin: 0 auto 10px auto;
                color: #fff;
                font-weight: 700;
            }

            @-webkit-keyframes free_download1 {
                0% {
                    transform: scale(0.9)
                }

                20% {
                    transform: scale(1)
                }

                40% {
                    transform: scale(0.9)
                }

                60% {
                    transform: scale(1)
                }

                80% {
                    transform: scale(0.9)
                }

                100% {
                    transform: scale(1)
                }
            }

            @keyframes free_download1 {
                0% {
                    transform: scale(0.9)
                }

                20% {
                    transform: scale(1)
                }

                40% {
                    transform: scale(0.9)
                }

                60% {
                    transform: scale(1)
                }

                80% {
                    transform: scale(0.9)
                }

                100% {
                    transform: scale(1)
                }
            }

        </style>
        <button class="btn-submit btn_gdj_design" id="Jsubmit">立即获取报价</button>

 

样式2：

<style>
        .sjh-form-list-box .template-enhance-animation {
            -webkit-animation: templateEnlargeShrink 2s infinite;
            -o-animation: templateEnlargeShrink 2s infinite;
            animation: templateEnlargeShrink 2s infinite;
            overflow: hidden;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }

        .sjh-form-list-box .template-enhance-animation-light {
            position: absolute;
            top: 0;
            width: 6.1625rem;
            height: 2.8125rem;
            background-image: url('https://fe-resource.cdn.bcebos.com/mip/fengming/form/light_animate.png');
            background-size: 6.1625rem 2.8125rem;
            -webkit-animation: templateSearchLights 3s linear infinite forwards;
            -o-animation: templateSearchLights 3s linear infinite forwards;
            animation: templateSearchLights 3s linear infinite forwards;
            -webkit-transform-style: preserve-3d;
            -webkit-backface-visibility: hidden;
            -webkit-perspective: 1000;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }

        @keyframes templateSearchLights {
            0% {
                transform: translate(-5.66123188rem);
                -webkit-transform: translate(-5.66123188rem);
                opacity: 0;
            }
            66% {
                transform: translate(-5.66123188rem);
                -webkit-transform: translate(-5.66123188rem);
                opacity: 1;
            }
            100% {
                transform: translate(24.90942029rem);
                -webkit-transform: translate(24.90942029rem);
            }
        }

        @keyframes templateEnlargeShrink {
            0% {
                transform: scale(1);
                -webkit-transform: scale(1);
                -ms-transform: scale(1);
            }
            33% {
                transform: scale(0.95);
                -webkit-transform: scale(0.95);
                -ms-transform: scale(0.95);
            }
            66% {
                transform: scale(1);
                -webkit-transform: scale(1);
                -ms-transform: scale(1);
            }
            100% {
                transform: scale(1);
                -webkit-transform: scale(1);
                -ms-transform: scale(1);
            }
        }

        .sjh-form-list-box .button {
            font-size: .36rem;
            color: #fff;
            text-decoration: none;
            text-align: center;
            display: block;
            box-sizing: border-box;
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            appearance: none;
            padding: 0;
            margin: 0 auto;
            height: .8rem;
            line-height: .8rem;
            white-space: nowrap;
            position: relative;
            text-overflow: ellipsis;
            font-family: inherit;
            cursor: pointer;
            width: 90%;
            background-color: red;
            border-radius: 1.5rem;
            background-image: -webkit-linear-gradient(45deg, rgb(230, 50, 46), rgb(255, 25, 98));
        }
    </style>
    <div  class="sjh-form-list-box submit-control">
        <div  class="template-enhance-animation"
             style="">
            <div
                 class="button"
                 >
                立即获取报价
            </div>
            <div  class="template-enhance-animation-light"></div>
        </div>
    </div>