时间戳

首页 > 解决方案 > Css圆形按钮边框加载动画点击

css - Css圆形按钮边框加载动画点击

问题描述

我正在努力实现这一目标

https://codepen.io/jerrylow/pen/eXmroN?editors=1100

这是我的按钮

<button type="button" rel="tooltip"
                            class="btn btn-outline-warning btn-round">
                            <span></span>
                            <i class="material-icons">save</i>
                        </button>
     height: 30px;
        min-width: 30px;
        width: 30px;
    border-radius: 50%;
    font-size: 24px;
    height: 41px;
    min-width: 41px;
    width: 41px;
    padding: 0;
    overflow: hidden;
    position: relative;
    line-height: 41px;
    color: #ff9800;
    background-color: transparent;
    border-color: #ff9800;
    border: 1px solid currentColor
    box-shadow: 0 2px 2px 0 hsla(0,0%,60%,.14),0 3px 1px -2px hsla(0,0%,60%,.2),0 1px 5px 0 hsla(0,0%,60%,.12);
    margin: .3125rem 1px;
    outline: 0;
    transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1);
    will-change: box-shadow,transform;

按钮应该是圆形的，我尝试将按钮更改为圆形，但动画是方形的，更改关键帧中的值也没有多大帮助

我想在单击按钮时使用它。我在css动画方面不是很好，感谢任何帮助。

标签： csssasscss-animations

解决方案

我对此进行了一些推理，我的猜测是动画边框是一个 2px 高的跨度，沿着按钮的边框框运行，无论边框半径如何，它总是平方。我的猜测是这是不可能的。

推荐阅读