标签：css3 scale 缩放 rem transform infinite animation 按钮 webkit

样式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>

标签：css3,scale,缩放,rem,transform,infinite,animation,按钮,webkit
来源： https://www.cnblogs.com/-mrl/p/16295011.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。