CSS实现围绕按钮边框转圈的光线效果,可以自由改变按钮的光线渐变颜色和按钮边框颜色,背景色等。
效果图:
实现完整代码:
<template><view class="btnBlock"><view class="btnBian"></view><view class="btn">诊疗之旅</view></view>
</template><script>export default {data() {return {};},methods: {}};
</script><style scoped>.btnBlock {position: relative;overflow: hidden;height: 100rpx;width: 200rpx;margin: 50rpx;background-color: rgba(255, 105, 180, 0.2);border-radius: 3px;}.btnBian {height: 200rpx;width: 200rpx;border-radius: 3px;animation: border-line 3s infinite linear;z-index: 3;transform-origin: 0 0;top: 50%;left: 50%;content: '';background: linear-gradient(to bottom, #ffaa7f, #ff5500);position: absolute;}@keyframes border-line {to {transform: rotate(1turn);}}.btn {z-index: 4;height: 90rpx;width: 190rpx;margin: 2px;border-radius: 3px;display: flex;justify-content: center;align-items: center;position: relative;overflow: hidden;background-color: #10647F;color:#fff;}</style>