妙妙屋

思而不学则殆

0%

wxss实践

发表于 更新于 分类于
本文字数： 1.7k 阅读时长 ≈ 6 分钟

常用属性

肝（抄）了一周wxss，有了点心得，分享一下

居中三板斧

设置容器为弹性盒

1
2
3
4
5
display:flex;
justify-content: center;
//如果主轴是水平的，那么Flex项目将在容器内水平居中。
align-items: center;
//如果主轴是水平的，那么交叉轴就是垂直的，Flex项目将在容器内垂直居中。

极限微操

1
2
3
4
5
6
7
8
9
10
position: absolute;
//position: absolute;设置为绝对位置，可以和其他元素重合（因为z-index不同，不在同一图层），这样就有一个好处就是不会牵一发而动全身，可以肆意调整容器位置

z-index: 1;
//设置图层，设置背景的时候经常用，z-index越小，图层越靠下

margin: 0 0 0 0;
//分别为距离上，右，下，左，的边距
//只写两个的话，调整上下，左右的边距
//只写一个，调整上下左右的边距

margin和padding，个人感觉比padding好用，上图

初始状态

image-20240518110607965

使用padding调整边距

image-20240518110644254

使用margin调整边距

image-20240518110704801

模块美化一：圆角+阴影

1
2
3
4
5
6
7
border-radius: 30px;
//设置圆角

box-shadow: 1px 1px 1px rgb(88, 88, 88);
//设置阴影，属性分别为，水平偏移量，垂直偏移量，模糊半径，阴影颜色，可以根据自己的喜好将阴影放到想要的位置

//text-shadow是设置字体阴影的也很不错，可以自己创建艺术字效果

无阴影

image-20240518105315289

有阴影

image-20240518105332800

有阴影无圆角

image-20240518105414374

总之阴影可以给容器增加一种层次感，很好的美化效果

模块美化二：渐变

1
2
background: linear-gradient(to right, #c528d3 , #2033df);
//渐变可以背景渐变，字体渐变一会再说

渐变没啥好说的都见过渐变色，整个花活吧

写一个容器外层限制大小，内层实现一个鼠标移动过去出现一个从左向右的下弧线，鼠标移开，下划线从左向右消失

主要利用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
box-min-title view{
    background: linear-gradient(to right, #7e2f3b, #146420) no-repeat right bottom;
    //设置背景为渐变，to right 从左向右渐变 ，no-repeat 背景图像只显示一次（不设置重复的背景会铺满容器） ， right bottom 设置背景在右下方
    background-size: 0 2px;
    //设置背景大小，宽度为0，高度为2px，将背景设置为线性，达到下划线的效果
    transition: background-size 1s;
    //给代码增加一个过渡效果，是得background-size（背景大小）变化在1s内完成，算是一个动画效果了
}

.box-min-title view:hover{
    background-position: left bottom;
    //添加鼠标放置动画，鼠标放上去之后，背景从左下开始，增加至100%
    background-size: 100% 2px;
}

//鼠标移开时背景右在右下，背景宽度减少至0，动画效果就是从左向右消失

不设置no-repeat

image-20240518113322383

源码加成品

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.box-min-title{
    display: flex;
    width: 47%;
    margin:  20px 0 0 50%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box-min-title view{
    background: linear-gradient(to right, #7e2f3b, #146420) no-repeat right bottom;
    background-size: 0 2px;
    transition: background-size 1s;
    position: absolute;
    margin: 30px 0 0 0;
    font-size: 30px;
}
.box-min-title view:hover{
    background-position: left bottom;
    background-size: 100% 2px;
}

image-20240518113648360

艺术字

1
2
3
4
5
6
7
8
9
10
11
12
line-height: 50px;
//行间距
letter-spacing: 35rpx;
//字间距
font-style: italic;
//倾斜

background: linear-gradient(to bottom,rgb(93, 68, 233) ,rgb(116, 147, 177));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
//渐变字体组合拳

效果：艺术细菌和审美实在有限

image-20240518115344814

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.box-text{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100%;
}
//整个居中弹性盒没啥好说的

.box-text text{
    background: linear-gradient(to bottom,rgb(93, 68, 233) ,rgb(116, 147, 177));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    
/*
整个渐变字体，color: transparent;将文本设置为透明，为了显示出来渐变的背景颜色，利用 -webkit-background-clip: text; 将背景限制在文本的位置，-webkit-background-clip: text;需要 background-clip: text; 才不会有黄色问题标识，实测，只有-webkit-background-clip: text; 就可以实现功能，但是只有background-clip: text; 不行
*/

    font-size: 30px;
    font-style: italic;
    font-weight: bold;
    //分别为设置字体大小，字体倾斜，字体加粗
    
    letter-spacing: 20px;
    //设置字间距为20px
    text-shadow: 1px 1px 30px rgb(226, 143, 143);
    opacity:0.8;
    //设置字体透明度0-1
}

没有找到小程序内实现文本透视效果的方法，欢迎大佬斧正

展示成品

说了那么多，应该能看懂下面的源码……了吧？

image-20240518125039100

源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<view class="box">
    <view class="content">
        <form bindsubmit="onform">
            <view class="okk">
                <input type="text" placeholder="请输入用户名" class="ok"/>
            </view>
            <view class="okk">
                <input type="text" placeholder="请输入密码" class="ok"/>
            </view>
            <view class="container" style="padding: 5px 0;">
                <view class="bt" form-type="submit">
                <text class="container" bind:tap="denglu">登录</text>
                </view>
                <view style="height: 20px;"></view>
                <view class="bt" style="background: #c61dff;">
                <text class="container">注册</text>
                </view>
            </view>
        </form>
    </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
page,
.box,
.content {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
page {
    background: #eff0f4;
}

.box {
    position: absolute;
    display: flex;
    justify-content: space-between;
    margin: 130px auto;
    width: 470px;
}

.box .content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 350px;
    height: 350px;
    padding: 60px 20px;
    box-shadow: 
        20px 20px 20px rgba(0, 0, 0, 0.3),
        25px 35px 20px rgba(0, 0, 0, 0.3),
        25px 30px 30px rgba(0, 0, 0, 0.3);
    transition: .5s;
    border-radius: 52% 48% 33% 67% / 38% 45% 55% 62%;
}

.box .content:hover {
    border-radius: 50%;
}

.box .content::before {
    content: "";
    position: absolute;
    top: 50px;
    left: 85px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.9;
}
.ok{
    position: relative;
    border-radius: 25px;
    box-shadow: 2px 5px 10px rgb(204, 193, 193);
    padding: 0 30rpx;
    font-size: 16px;
    outline: none;
}
.okk{
    padding: 30rpx 0;
}
.bt{
    width: 100px;
    transition: 0.5s;
    background: #ff0f5b;
    border-radius: 25px;
    padding: 7rpx 3rpx;
    box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
}
.box .content .container .bt:hover{
    width: 150px;
}
.page{
    height:100%;
  }
.background {
    width: 100%;
    height: 100%;
    position:fixed; 
    background-size:100% 100%;
    z-index: -1;
    filter: blur(6rpx);
    filter: brightness(0.9);
}

image-20240518125106524

image-20240518125112348

1
2
3
4
5
6
7
8
9
10
11
12
<view class="searchBar{{expand ? 'change-width': ''}}">
    <view class="icons">
        <image src="../../image/搜索.png" bind:tap="show"/> 
    </view>
    <view class="textinput">
        <input type="text" placeholder="请输入搜索关键字" value="{{myinput}}" bindinput="valueinput"/>
        <image src="../../image/删除.png" class="clear" bind:tap="clear"/>
        <view class="bt">
            <text class="goBtn">搜索</text>
        </view>
    </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
page{
    width: 100vm;
    height: 100vh;
    background: linear-gradient(
        to bottom skyblue #003462
    );
    display: flex;
    justify-content: center;
    align-items: center;
}
.searchBar{
    width: 400px;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    border-radius: 60px;
    position: absolute;
    overflow: hidden;
    transition: 0.5s;
    z-index: 1;
}
.icons{
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.icons image{
    width: 30px;
    height: 30px;
    font-size: 30px;
}
.textinput{
    width: 320px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 60px;
    right: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 255, 255);
}
.textinput input{
    width: 270px;
    height: 100%;
    border: none;
    outline: none;
    font-size: 18px;
    padding: 0 90px 0 0;
}
.clear{
    width: 20px;
    height: 20px;
    position: absolute;
    right: 18%;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.clear image{
    width: 20px;
    height: 20px;
    color: #999;
}
.goBtn{
    width: 14%;
    height: 60%;
    position: absolute;
    top: 20%;
    right: 0;
    border-radius: 8px;
    outline: none;
    border: none;
    color: rgb(80, 0, 0);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
    background: linear-gradient(
        skblue,deepskyblue
    );
    cursor: pointer;
    justify-content: center;
    align-items: center;
    display: flex;
}
.searchBarchange-width{
    width: 60px;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    border-radius: 60px;
    position: absolute;
    overflow: hidden;
    transition: 0.5s;
    margin: -500px 0 0 0;
    z-index: 1;
}