按钮循环波动

最新推荐文章于 2026-01-03 21:59:22 发布

转载最新推荐文章于 2026-01-03 21:59:22 发布 · 339 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/sinat_24713805/article/details/123112827

文章标签：

#css #html #javascript

博客分享了相关代码，虽提及有转载部分，但重点是博主自己的代码，涉及HTML、CSS和JavaScript等信息技术领域内容。

:after{
    content: "";
    animation: pulse-border-2 2s ease-out infinite;
    top: 36px;
    left: 50%;
    background: #fff;
    width: 100%;
    border-radius: 36px;
}

@keyframes pulse-border-2{
0%{transform:translate(-50%,-50%) translateZ(0) scale(1);opacity:.7}
100%{transform:translate(-50%,-50%) translateZ(0) scale(1.35);opacity:.1}
}

下面提供全部代码（上面是转载，下面是我自己的代码）

.btn-play {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
        border: none;
        outline: none !important;
        padding: 18px 20px 20px 28px;
        background: #FFFFFF;
    }

    .btn-play:before {
        content: "";
        position: absolute;
        z-index: 0;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        display: block;
        width: 60px;
        height: 60px;
        background: #FFFFFF;
        border-radius: 100%;
        animation: pulse-border 1500ms ease-out infinite;
    }

    .btn-play:after {
        content: "";
        position: absolute;
        z-index: 1;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        display: block;
        width: 60px;
        height: 60px;
        background: #FFFFFF;
        border-radius: 100%;
        transition: all 200ms;
    }

    .btn-play span {
        z-index: 3;
        width: 0;
        height: 0;
        border-left: 16px solid #E47A2E;
        border-top: 11px solid transparent;
        border-bottom: 11px solid transparent;
    }

    @keyframes pulse-border {
        0% {
            transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
            opacity: 1;
        }
        100% {
            transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2);
            opacity: 0;
        }
    }

.playIcon{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<div class="btn-play playIcon" >
     <span></span>
</div>