微信小程序的页面美化

文字颜色渐变

.btn {display: inline-block;margin: 20px;padding: 1em 2em;background: transparent;border: 2px;border-radius: 3px;font-weight: 400;text-align: center;box-shadow: 0px 2px 4px #67c0f0,0px 1px 2px #bf2fcb;
}.btn text {background: -webkit-linear-gradient(left, #67c0f0, #bf2fcb);background-clip: text;//不加这行会报错-webkit-background-clip: text;-webkit-text-fill-color: transparent;
}

wxml中若这样写的话：

<view class="btn blue"><text>Buy Tickets Now</text></view>

效果图如下：

渐变色的代码是：
linear-gradient（）
括号里写上渐变的起始颜色和终止颜色。

圆角边框：

.bt_connect{width: 200rpx;height: 70rpx;color: #6699FF;border: 3rpx solid #6699FF;border-radius: 80rpx;font-size: 35rpx;margin-top: 40rpx;display: flex;justify-content: center;align-items: center;
}
/* 按钮的点击效果 */
.hover-class-1 {top: 3rpx;background-color: #e7f5ff;
}

wxml中的代码若是这样：

<button class="bt_connect" hover-class="hover-class-1" bindtap="connect">连接</button>

效果图如下：

更多的特效：

**
文字跑马灯效果： http://www.wxapp-union.com/portal.php?mod=view&aid=1038
触摸水波涟漪效果： http://www.wxapp-union.com/portal.php?mod=view&aid=1350
下拉菜单效果： http://www.wxapp-union.com/portal.php?mod=view&aid=1875
五星评分效果： http://www.wxapp-union.com/portal.php?mod=view&aid=1876
数字累加，动态效果：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1694
星战字幕效果： http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1689
动画卡片效果： http://www.wxapp-union.com/forum.php?mod=viewthread&tid=2193
图片的滤镜效果： http://www.wxapp-union.com/forum.php?mod=viewthread&tid=3949
黑客帝国metrix效果：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=4670
CSS3动画效果： http://www.wxapp-union.com/forum.php?mod=viewthread&tid=4628
仿直播点赞气泡效果：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=2833
文字弹幕效果： http://www.wxapp-union.com/forum.php?mod=viewthread&tid=4713
发短信验证码倒计时：http://www.wxapp-union.com/portal.php?mod=view&aid=1671
弹出菜单特效： http://www.wxapp-union.com/portal.php?mod=view&aid=1659
滚动动画： http://www.wxapp-union.com/portal.php?mod=view&aid=1538
实时圆形进度条： http://www.wxapp-union.com/portal.php?mod=view&aid=1456
遮罩层： http://www.wxapp-union.com/forum.php?mod=viewthread&tid=3617
仿Table效果： http://www.wxapp-union.com/portal.php?mod=view&aid=1038
支付倒计时效果： http://www.wxapp-union.com/portal.php?mod=view&aid=890
侧边栏滑动特效： http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1202
顶部导航效果： http://www.wxapp-union.com/portal.php?mod=view&aid=1665
弹出和隐藏动画： http://www.wxapp-union.com/portal.php?mod=view&aid=1449
切换动画： http://www.wxapp-union.com/portal.php?mod=view&aid=1113
操作按钮悬浮固定在底部：http://www.wxapp-union.com/portal.php?mod=view&aid=1029
文字单行背景自适应带角标：http://www.wxapp-union.com/portal.php?mod=view&aid=636
仿UC宣传页面的简单动画效果：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=4266
列表项左滑删除效果：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=2189