當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

uniapp——漂亮的按钮，圆角view，渐变色view，圆角边框view，点击效果波动、点击放大效果

發(fā)布時間：2024/3/12 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 uniapp——漂亮的按钮，圆角view，渐变色view，圆角边框view，点击效果波动、点击放大效果小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1、漂亮的按鈕

a、圓角按鈕

template

style

.button-yuanjiao {width: 200rpx;height: 50rpx;display: flex;margin-top: 30rpx;line-height: 50rpx;justify-content: center;border-radius: 25px;/* 這里可以改成漸變： background:linear-gradient(to right, #FFDE28,#FF3228) */background-color: #ff5500;font-size: 28rpx;} .bg-click {background-color: #a7a9ff;}

b、邊框按鈕

template

style

.button-biankuang{width: 200rpx;height: 50rpx;display: flex;margin-top: 30rpx;line-height: 50rpx;justify-content: center;border-radius: 25px;border: 3rpx solid #6699FF;font-size: 28rpx;} .bg-click {top: 3upx;background-color: #a7a9ff;}

2、圓角view，按下變背景色

template

<view class="view-yuanjiao" hover-class="bg-click"> {{title}} </view>

style

.view-yuanjiao {width: 200rpx;height: 50rpx;display: flex;justify-content: center;border-radius: 25px;background-color: #007AFF;} .bg-click{top: 3upx;background-color: #a7a9ff; }

3、圓角邊框

template

<view class="view-biankuang" > 邊框view </view>

style

.view-biankuang{width: 200rpx;height: 50rpx;display: flex;margin-top: 30rpx;justify-content: center;border-radius: 25px; border: 3rpx solid #6699FF;}

4、漸變色

從左往右的漸變色：

//從上到下漸變 background: linear-gradient(blue, pink);//從左往右漸變 background: linear-gradient(to right, blue, pink);//對角線漸變，從左上到右下 background: linear-gradient(to bottom right, blue, pink);//70度漸變角度 background: linear-gradient(70deg, blue, pink);

5、點擊效果波動

效果圖：

代碼：

<template><view class="content"><image class="logo" src="/static/logo.png"></image><view class="confirm bubble">確定</view></view> </template><script>export default {data() {return {title: 'Hello',}},onLoad() {},methods: {}} </script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}/* 按鈕 */.confirm {width: 325rpx;height: 80rpx;background: #07c160;border-radius: 6rpx;font-size: 30rpx;color: #fff;line-height: 80rpx;text-align: center;}.bubble {position: relative;overflow: hidden;}.bubble:after {content: "44444";background: #5c9899;position: absolute;width: 750rpx;height: 750rpx;left: calc(50% - 375rpx);top: calc(50% - 375rpx);opacity: 0;margin: auto;border-radius: 50%;transform: scale(1);transition: all 0.5s ease-in-out;}.bubble:active:after {transform: scale(0);opacity: 1;transition: 0s;} </style>

6、點擊放大效果

<view class="confirm " hover-class="hover1">放大</view> .confirm {width: 325rpx;height: 80rpx;background: #07c160;border-radius: 6rpx;font-size: 30rpx;color: #fff;line-height: 80rpx;text-align: center;} .hover1{transform: scale(1.1) !important;}