呼吸动效

2021-07-12  本文已影响0人  小哼唧麻
.breathe {
            border: 1px solid #2b92d4;
            border-radius: 50%;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            animation-timing-function: ease-in-out;
            animation-name: breathe;
            animation-duration: 1500ms;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        @keyframes breathe {
            0% {
                opacity: .8;
                box-shadow: 0 1px 2px rgba(0, 147, 223, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
            }

            100% {
                opacity: 1;
                border: 1px solid rgba(59, 235, 235, 0.7);
                box-shadow: 0 1px 20px #0093df, 0 1px 20px #0093df inset;
            }
        }
上一篇 下一篇

猜你喜欢

热点阅读