流动按钮(效果绚丽，但实用性较差)

本文主要是介绍流动按钮(效果绚丽，但实用性较差)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本次所设专栏主要内容为纯代码，可直接复制食用(较为少见，但值得思考)

本次less编写，也可使用css

一、HTML

<button>点击按钮</button>

二、less

//设置边框距离
@w: 2px;
//设置边框颜色
@color: rgb(104, 253, 114);//动画
@keyframes moving {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}button {position: relative;cursor: pointer;margin: 100px auto;background: transparent;height: 50px;width: 130px;border-radius: 10px;font-size: 18px;//注释1overflow: hidden;color: rgb(244, 194, 76);border: 0;//使用伪类元素实现效果&::after,&::before {content: '';position: absolute;}&::after {border-radius: 10px;width: calc(100% - 2 * @w);height: calc(100% - 2 * @w);left: @w;top: @w;background-color: white;z-index: -1;}&::before {animation: moving 1s linear infinite;transform-origin: left top;left: 50%;top: 50%;width: 200%;height: 200%;background-color: @color;//注释2z-index: -2;}
}

将注释1和注释2下面的语句注释后即可查看到具体实现效果的过程

这篇关于流动按钮(效果绚丽，但实用性较差)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---