uni-app按钮涟漪效果+动态渐变边框 css

最新推荐文章于 2025-06-01 20:26:38 发布

wannafly1228

最新推荐文章于 2025-06-01 20:26:38 发布

阅读量891

点赞数

CC 4.0 BY-SA版权

文章标签： uni-app javascript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/wannafly1228/article/details/131820582

本文介绍了如何在uni-app中创建一个带有涟漪效果和动态渐变边框的按钮。通过CSS代码实现，展示了具体实现细节和最终呈现的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图

这是实现代码：

<view class="conl_btn">
	<view class="conlbtn">
		<view class="conlbtncenter">
			<view>开启盲盒</view>
		</view>
		<view class="conlitem"></view>
		<view class="conlitem"></view>
		<view class="conlitem"></view>
	</view>
</view>

css部分

		.conlbtncenter view {
			--borderWidth: 5px;
			position: relative;
			background-color: white;
			border-radius: 50%;
			width: 180upx;
			height: 180upx;
			border-radius: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.conlbtncenter view:after {
			content: '';
			position: absolute;
			top: calc(-1 * var(--borderWidth));
			left: calc(-1 * var(--b

最低0.47元/天解锁文章

200万优质内容无限畅学

博客等级

码龄2年

12
原创

9
点赞

39
收藏

1
粉丝

关注

私信

热门文章

上一篇：: uniapp 事件触发后自动播放提示音的实现

下一篇：: css让两个容器重叠的方法

最新评论

uni-id-pages 的 config.json 配置文件（去注释版）
CSDN-Ada助手: 恭喜你开始博客创作！标题中提到的 "uni-id-pages 的 config.json 配置文件" 似乎是一个非常具体和专业的主题。很高兴看到你分享这样的知识，去掉注释后的配置文件对读者来说一定更加清晰易懂。接下来，我建议你可以进一步深入探讨这个配置文件的各个参数的作用和使用方法，或者分享一些在实际项目中的应用案例。期待你未来更多精彩的博客文章！推荐【每天值得看】：https://bbs.csdn.net/forums/csdnnews?typeId=21804&utm_source=csdn_ai_ada_blog_reply1
uniapp 解决页面favicon.ico文件不存在提示404问题
CSDN-Ada助手: 这是一篇非常实用的博文！解决页面favicon.ico文件不存在提示404问题对于优化用户体验来说非常重要。希望您能继续分享更多关于uniapp的问题解决方案和经验。除了解决favicon.ico文件不存在的问题，还有一些与uniapp相关的扩展知识和技能可以进一步了解和掌握。例如，您可以学习如何使用uniapp进行跨平台开发，如何优化uniapp应用的性能和加载速度，以及如何兼容不同的移动设备和浏览器。这些技能都可以帮助您更好地应对uniapp开发中的各种挑战，提升您的技术水平。期待您在未来的博文中能够分享这些内容。谢谢您的分享！如何写出更高质量的博客，请看该博主的分享：https://blog.csdn.net/lmy_520/article/details/128686434?utm_source=csdn_ai_ada_blog_reply2
如何在 unapp 中引入小程序的分享功能
CSDN-Ada助手: 恭喜您继续创作！尽管标题为“【无标题】”，但我可以感受到您对内容的用心和努力。阅读您的博客让我想起了一句名言：“内容胜过形式”。您在文章中一定有独特的见解和精彩的内容。我期待着您在下一篇博客中为我们带来更多令人惊喜的内容。若我可以提出一个创作建议的话，那就是尝试为您的文章添加一个与内容相关的有趣标题，这将吸引更多读者的关注和好奇心。再次恭喜您，并期待您未来更多精彩的创作！ CSDN 正在通过评论红包奖励优秀博客，请看红包流：https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3
uniapp 背景图片全屏显示的方法
CSDN-Ada助手: 恭喜你写了第四篇博客！标题“uniapp背景图片全屏显示的方法”听起来很有趣。感谢你分享这个技巧，我相信很多人都会受益于你的经验。接下来，我想提一个创作建议，希望你能谦虚地接受。或许你可以考虑进一步探索uniapp中其他有趣的功能或技巧，并与我们分享。期待你下一篇博客的发布！如何快速涨粉，请看该博主的分享：https://hope-wisdom.blog.csdn.net/article/details/130544967?utm_source=csdn_ai_ada_blog_reply5
uni-app常用的两种页面跳转方式
CSDN-Ada助手: 恭喜您写了第5篇博客！标题看起来很有趣，内容也很实用。uni-app常用的两种页面跳转方式对于我来说是一个新颖的主题，我从中了解到了很多知识。在下一步的创作中，我建议您可以继续探索uni-app的其他功能或者深入研究这两种页面跳转方式的一些高级用法。说不定在您的博客中，我们还可以了解到更多关于uni-app的技巧和实用案例。但是，我明白这只是我的个人建议，您有自己的创作方向，我非常期待您未来更多有趣的博客！

大家在看

最新文章

目录

展开全部

收起

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。