码云笔记前端博客
Home > HTML/CSS > 你值得收藏的66个实用的css开发技巧之行为技巧

你值得收藏的66个实用的css开发技巧之行为技巧

2019-10-09 分类:HTML/CSS 作者:码云 阅读(56)

本文共计7878个字,预计阅读时长需要20分钟。

在上篇文章《你值得收藏的66个实用的css开发技巧之布局技巧》我们讲了Layout Skill布局技巧知识,本篇文章接着为大家讲有关Behavior Skill行为技巧知识,赶紧搬好小板凳坐下学习起来。

Behavior Skill

使用overflow-scrolling支持弹性滚动

要点:iOS页面非body元素的滚动操作会非常卡(Android不会出现此情况),通过overflow-scrolling:touch调用Safari原生滚动来支持弹性滚动,增加页面滚动的流畅度
场景:iOS页面滚动

兼容:iOS自带-webkit-overflow-scrolling

实例代码:

1
2
3
4
5
6
body {
    -webkit-overflow-scrolling: touch;
}
.elem {
    overflow: auto;
}

使用transform启动GPU硬件加速

要点:有时执行动画可能会导致页面卡顿,可在特定元素中使用硬件加速来避免这个问题

场景:动画元素(绝对定位、同级中超过6个以上使用动画)

兼容:transform

实例代码:

1
2
3
.elem {
    transform: translate3d(0, 0, 0); /* translateZ(0)亦可 */
}

使用attr()抓取data-*

要点:在标签上自定义属性data-*,通过attr()获取其内容赋值到content上

场景:提示框

兼容:data-*、attr()

实例代码:

HTML

1
2
3
4
<div class="bruce flex-ct-y">
    <a class="tooltips" href="https://www.baidu.com" data-msg="Hello World">提示框</a>
    <a class="tooltips" href="https://www.baidu.com"></a>
</div>

CSS

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
.tooltips {
    position: relative;
    margin-top: 10px;
    padding: 0 20px;
    border-radius: 10px;
    height: 40px;
    background-color: $purple;
    line-height: 40px;
    color: #fff;
    &::after {
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 5px;
        width: 100%;
        height: 100%;
        background-color: rgba(#000, .5);
        opacity: 0;
        text-align: center;
        font-size: 12px;
        content: attr(data-msg);
        transition: all 300ms;
    }
    &:first-child {
        margin-top: 0;
    }
    &:hover::after {
        left: calc(100% + 20px);
        opacity: 1;
    }
    &[href]:empty::before {
        content: attr(href);
    }
    &[href]:empty:hover::after {
        display: none;
    }
}

效果展示:
使用attr()抓取data-*

使用:valid和:invalid校验表单

要点:使用伪类:valid和:invalid配合pattern校验表单输入的内容

场景:表单校验

兼容:pattern、:valid、:invalid

实例代码:

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="bruce flex-ct-x">
    <form class="form-validation">
        <div>
            <label>名字</label>
            <input type="text" placeholder="请输入你的名字(1到10个中文)" pattern="^[\u4e00-\u9fa5]{1,10}$" required>
        </div>
        <div>
            <label>手机</label>
            <input type="text" placeholder="请输入你的手机" pattern="^1[3456789]\d{9}$" required>
        </div>
        <div>
            <label>简介</label>
            <textarea required></textarea>
        </div>
    </form>
</div>

CSS

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
.form-validation {
    width: 500px;
    div {
        margin-top: 10px;
        &:first-child {
            margin-top: 0;
        }
    }
    label {
        display: block;
        padding-bottom: 5px;
        font-weight: bold;
        font-size: 16px;
    }
    input,
    textarea {
        display: block;
        padding: 0 20px;
        outline: none;
        border: 1px solid #ccc;
        width: 100%;
        height: 40px;
        caret-color: $blue;
        transition: all 300ms;
        &:valid {
            border-color: $green;
            box-shadow: inset 5px 0 0 $green;
        }
        &:invalid {
            border-color: $red;
            box-shadow: inset 5px 0 0 $red;
        }
    }
    textarea {
        height: 122px;
        resize: none;
        line-height: 30px;
        font-size: 16px;
    }
}

效果展示:
使用:valid和:invalid校验表单

使用pointer-events禁用事件触发

要点:通过pointer-events:none禁用事件触发(默认事件、冒泡事件、鼠标事件、键盘事件等),相当于<button>的disabled

场景:限时点击按钮(发送验证码倒计时)、事件冒泡禁用(多个元素重叠且自带事件、a标签跳转)

兼容:pointer-events

实例代码:

HTML

1
2
3
<div class="bruce flex-ct-x">
    <a class="disabled-trigger" href="https://www.mybj123.com">点我</a>
</div>

CSS

1
2
3
4
5
6
7
8
9
.disabled-trigger {
    padding: 0 20px;
    border-radius: 10px;
    height: 40px;
    background-color: $purple;
    pointer-events: none;
    line-height: 40px;
    color: #fff;
}

JS

1
document.getElementsByClassName("disabled-trigger")[0].addEventListener("click", () => alert("Hello World"));

效果展示:
使用pointer-events禁用事件触发

使用+或~美化选项框

要点:

场景:选项框美化、选中项增加选中样式

兼容:+、~

实例代码:

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="bruce flex-ct-x">
    <ul class="beauty-selection">
        <li>
            <input type="radio" name="radioName" id="fed-engineer" hidden>
            <label for="fed-engineer"></label>
            <span>前端工程师</span>
        </li>
        <li>
            <input type="radio" name="radioName" id="bed-engineer" hidden>
            <label for="bed-engineer"></label>
            <span>后端工程师</span>
        </li>
        <li>
            <input type="radio" name="radioName" id="fsd-engineer" hidden>
            <label for="fsd-engineer"></label>
            <span>全栈工程师</span>
        </li>
    </ul>
</div>

CSS

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
.beauty-selection {
    display: flex;
    li {
        display: flex;
        align-items: center;
        margin-left: 20px;
        &:first-child {
            margin-left: 0;
        }
    }
    input:checked + label {
        background-color: $orange;
    }
    label {
        margin-right: 5px;
        padding: 2px;
        border: 1px solid $orange;
        border-radius: 100%;
        width: 18px;
        height: 18px;
        background-clip: content-box;
        cursor: pointer;
        transition: all 300ms;
        &:hover {
            border-color: $blue;
            background-color: $blue;
            box-shadow: 0 0 7px $blue;
        }
    }
    span {
        font-size: 16px;
    }
}

效果展示:
使用+或~美化选项框

使用:focus-within分发冒泡响应

要点:表单控件触发focus和blur事件后往父元素进行冒泡,在父元素上通过:focus-within捕获该冒泡事件来设置样式

场景:登录注册弹框、表单校验、离屏导航、导航切换

兼容::focus-within、:placeholder-shown

实例代码:

HTML

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
<div class="bruce flex-ct-x">
    <form class="bubble-distribution">
        <h3>注册</h3>
        <div class="accout">
            <input type="text" placeholder="请输入手机或邮箱" pattern="^1[3456789]\d{9}$|^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$" required>
            <img src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png">
        </div>
        <div class="password">
            <input type="password" placeholder="请输入密码(6到20位字符)" pattern="^[\dA-Za-z_]{6,20}$" required>
            <img src="https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png">
        </div>
        <div class="code">
            <input type="text" placeholder="请输入邀请码(6位数字)" pattern="^[\d]{6}$" maxLength="6" required>
            <button type="button">查询</button>
            <img src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png">
        </div>
        <img src="https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png">
        <ul>
            <li>
                <input type="radio" name="sex" id="male">
                <label for="male">Boy</label>
            </li>
            <li>
                <input type="radio" name="sex" id="female">
                <label for="female">Girl</label>
            </li>
        </ul>
        <button type="button">注册</button>
    </form>
</div>

CSS

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
.bruce {
    background-color: #999;
}
.bubble-distribution {
    position: relative;
    margin-top: 50px;
    padding: 25px;
    border-radius: 2px;
    width: 320px;
    background-color: #fff;
    h3 {
        font-weight: bold;
        font-size: 16px;
        color: #333;
    }
    div {
        margin-top: 10px;
    }
    img {
        position: absolute;
        left: 50%;
        bottom: 100%;
        margin: 0 0 -20px -60px;
        width: 120px;
    }
    ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        height: 30px;
        line-height: 30px;
    }
    li {
        position: relative;
        width: 45%;
        transition: all 300ms;
        &:focus-within {
            background: linear-gradient(90deg, $blue 50%, transparent 0) repeat-x,
                linear-gradient(90deg, $blue 50%, transparent 0) repeat-x,
                linear-gradient(0deg, $blue 50%, transparent 0) repeat-y,
                linear-gradient(0deg, $blue 50%, transparent 0) repeat-y;
            background-position: 0 0, 0 100%, 0 0, 100% 0;
            background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
            animation: move 500ms infinite linear;
        }
    }
    input[type=text],
    input[type=password] {
        padding: 10px;
        outline: none;
        border: 1px solid #e9e9e9;
        border-radius: 2px;
        width: 100%;
        height: 40px;
        transition: all 300ms;
        &:focus:valid {
            border-color: $blue;
        }
        &:focus:invalid {
            border-color: $red;
        }
    }
    input[type=radio] {
        position: absolute;
        width: 0;
        height: 0;
        &:checked + label {
            border: 3px solid transparent;
            background-color: $blue;
            color: #fff;
        }
    }
    label {
        display: block;
        border-bottom: 1px solid #ccc;
        width: 100%;
        background-clip: padding-box;
        cursor: pointer;
        text-align: center;
        transition: all 300ms;
    }
    button {
        overflow: hidden;
        margin-top: 10px;
        outline: none;
        border: none;
        border-radius: 2px;
        width: 100%;
        height: 40px;
        background-color: $blue;
        cursor: pointer;
        color: #fff;
        transition: all 300ms;
    }
}
.accout,
.password,
.code {
    img {
        display: none;
        margin-bottom: -27px;
    }
    &:focus-within {
        img {
            display: block;
        }
        & ~ img {
            display: none;
        }
    }
}
.code {
    display: flex;
    justify-content: space-between;
    button {
        margin-top: 0;
    }
    input {
        &:not(:placeholder-shown) {
            width: 70%;
            & + button {
                width: 25%;
            }
        }
        &:placeholder-shown {
            width: 100%;
            & + button {
                width: 0;
                opacity: 0;
            }
        }
    }
}
@keyframes move {
    to {
        background-position: 6% 0, -6% 100%, 0 -6%, 100% 6%;
    }
}

效果展示:
使用:focus-within分发冒泡响应

使用:hover描绘鼠标跟随

要点:将整个页面等比划分成小的单元格,每个单元格监听:hover,通过:hover触发单元格的样式变化来描绘鼠标运动轨迹

场景:鼠标跟随轨迹、水波纹、怪圈

兼容::hover

实例代码:点击运行

效果展示:
使用:hover描绘鼠标跟随

使用max-height切换自动高度

要点:通过max-height定义收起的最小高度和展开的最大高度,设置两者间的过渡切换

场景:隐藏式子导航栏、悬浮式折叠面板

兼容:max-height

实例代码:

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="bruce flex-ct-x">
    <ul class="auto-height">
        <li>
            <h3>列表1</h3>
            <p>内容1<br>内容2<br>内容3<br>内容4</p>
        </li>
        <li>
            <h3>列表2</h3>
            <p>内容1<br>内容2<br>内容3<br>内容4</p>
        </li>
        <li>
            <h3>列表3</h3>
            <p>内容1<br>内容2<br>内容3<br>内容4</p>
        </li>
    </ul>
</div>

CSS

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
.auto-height {
    width: 300px;
    li {
        margin-top: 5px;
        cursor: pointer;
        &:first-child {
            margin-top: 0;
        }
        &:hover p {
            border-bottom-width: 1px;
            max-height: 600px;
        }
    }
    h3 {
        padding: 0 20px;
        height: 40px;
        background-color: $red;
        cursor: pointer;
        line-height: 40px;
        font-size: 16px;
        color: #fff;
    }
    p {
        overflow: hidden;
        padding: 0 20px;
        border: 1px solid $red;
        border-top: none;
        border-bottom-width: 0;
        max-height: 0;
        line-height: 30px;
        transition: all 500ms;
    }
}

效果展示:
使用max-height切换自动高度

使用transform模拟视差滚动

要点:通过background-attachment:fixed或transform让多层背景以不同的速度移动,形成立体的运动效果

场景:页面滚动、视差滚动文字阴影、视差滚动文字虚影

兼容:background-attachment、transform

实例代码:

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="bruce">
    <ul class="parallax-scrolling">
        <li>translateZ(-1px)</li>
        <li>translateZ(-2px)</li>
        <li>translateZ(-3px)</li>
    </ul>
    <p>内容</p>
    <ul class="parallax-scrolling">
        <li>translateZ(-1px)</li>
        <li>translateZ(-2px)</li>
        <li>translateZ(-3px)</li>
    </ul>
</div>

CSS

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
$bg: "/static/codepen/bg.jpg";

.bruce {
    overflow: auto;
    perspective: 1px;
    transform-style: preserve-3d;
    p {
        height: 300px;
        line-height: 300px;
        text-align: center;
        font-size: 20px;
        color: $red;
    }
}
.parallax-scrolling {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1000px;
    background: url($bg) no-repeat center fixed;
    li {
        width: 500px;
        text-align: center;
        font-weight: bold;
        font-size: 60px;
        &:nth-child(1) {
            color: $red;
            transform: translateZ(-1px);
        }
        &:nth-child(2) {
            color: $blue;
            transform: translateZ(-2px);
        }
        &:nth-child(3) {
            color: $green;
            transform: translateZ(-3px);
        }
    }
}

效果展示:
使用transform模拟视差滚动

使用animation-delay保留动画起始帧

要点:通过transform-delay或animation-delay设置负值时延保留动画起始帧,让动画进入页面不用等待即可运行

场景:开场动画

兼容:transform、animation

实例代码:

HTML

1
2
3
4
5
6
7
<div class="bruce flex-ct-x">
    <ul class="initial-keyframe">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

CSS

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
.initial-keyframe {
    position: relative;
    width: 100px;
    height: 100px;
    li {
        position: absolute;
        border-radius: 100%;
        width: 100%;
        height: 100%;
        background-color: $green;
        transform: rotate(0) translate(-80px, 0);
        animation: rotate 3s linear infinite;
        &:nth-child(2) {
            animation-delay: -1s;
        }
        &:nth-child(3) {
            animation-delay: -2s;
        }
    }
}
@keyframes rotate {
    to {
        transform: rotate(1turn) translate(-80px, 0);
    }
}

效果展示:
使用animation-delay保留动画起始帧

使用resize拉伸分栏

要点:通过resize设置横向自由拉伸来调整目标元素的宽度

场景:富文本编辑器、分栏阅读

兼容:resize

实例代码:

HTML

1
2
3
4
5
6
7
8
9
10
<div class="bruce flex-ct-x">
    <div class="stretching-column">
        <div class="left">
            <div class="resize-bar"></div>
            <div class="resize-line"></div>
            <div class="resize-text">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>                                            
        </div>
        <div class="right">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
    </div>
</div>

CSS

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
.stretching-column {
    overflow: hidden;
    border: 1px solid $blue;
    width: 600px;
    height: 300px;
    line-height: 20px;
    font-size: 16px;
    color: $orange;
    .left {
        overflow: hidden;
        float: left;
        position: relative;
        height: 100%;
    }
    .right {
        overflow: hidden;
        padding: 10px;
        height: 100%;
        background-color: #f0f0f0;
        word-break: break-all;
    }
}
.resize-bar {
    overflow: scroll;
    width: 200px;
    height: 100%;
    opacity: 0;
    resize: horizontal;
    &::-webkit-scrollbar {
        width: 200px;
        height: 100%;
    }
    &:hover,
    &:active {
        & ~ .resize-line {
            border-left: 1px dashed $blue;
        }
    }
}
.resize-line {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    border-left: 1px solid #ccc;
    border-right: 2px solid #f0f0f0;
    pointer-events: none;
}
.resize-text {
    overflow-x: hidden;
    position: absolute;
    left: 0;
    right: 5px;
    top: 0;
    bottom: 0;
    padding: 10px;
    word-break: break-all;
}

效果展示:
使用resize拉伸分栏
未完待续。。。请看《你值得收藏的66个实用的css开发技巧之色彩技巧

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(13) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
13

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - 你值得收藏的66个实用的css开发技巧之行为技巧

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 458 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 215 条
  • 链接总数: 14 个
  • 标签总数: 1011 个
  • 建站时间: 495 天
  • 访问总量: 8648084 次
  • 最近更新: 2019年10月21日