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

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

2019-10-14 分类:HTML/CSS 作者:管理员 阅读(100)

本文共计3682个字,阅读时间预计10分钟,干货满满,记得点赞加收藏哦

上面我们介绍了色彩技巧相关知识,本文将为大家带来的是你值得收藏的66个实用的css开发技巧之图形技巧。

Figure Skill图形技巧

使用div描绘各种图形

要点:<div>配合其伪元素(::before、::after)通过clip、transform等方式绘制各种图形

场景:各种图形容器

兼容:clip、transform

实例代码:具体查看我之前整理css优雅的画出形状图形

使用mask雕刻镂空背景

要点:通过mask为图像背景生成蒙层提供遮罩效果

场景:高斯模糊蒙层、票劵(电影票、购物卡)、遮罩动画

兼容:mask、perspective、transform-style、animation

实例代码:

HTML

1
2
3
<div class="bruce pr flex-ct-x">
    <div class="mask-layer"></div>
</div>

SCSS

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
$mask-bg: "/static/codepen/mask-bg.jpg";
$mask-text: "/static/codepen/mask-text.jpg";
$logo: "/wp-content/uploads/2019/09/test.png";

.bruce {
    overflow: hidden;
    &::after {
        position: absolute;
        left: -20px;
        right: -20px;
        top: -20px;
        bottom: -20px;
        background: url($mask-bg) no-repeat center/cover;
        filter: blur(10px);
        content: "";
    }
}
.mask-layer {
    position: relative;
    z-index: 9;
    width: 600px;
    height: 300px;
    background: url($mask-text) left center/150% auto;
    mask: url($logo) center/cover;
    animation: move 10s infinite;
}
@keyframes move {
    0% {
        background-position-x: 0;
    }
    50% {
        background-position-x: 100%;
    }
}

效果展示:
使用mask雕刻镂空背景

使用linear-gradient描绘波浪线

要点:通过linear-gradient绘制波浪线

场景:文字强化显示、文字下划线、内容分割线

兼容:gradient

实例代码:

HTML

1
2
3
<div class="bruce flex-ct-x">
    <p class="waveline-text">波浪线文字</p>
</div>

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@mixin waveline($h, $color: $red) {
    position: relative;
    &::after {
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        height: $h;
        background: linear-gradient(135deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%), linear-gradient(45deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%);
        background-size: $h * 2 $h * 2;
        content: "";
    }
}
.waveline-text {
    height: 20px;
    line-height: 20px;
    letter-spacing: 10px;
    @include waveline(10px);
}

效果展示:
使用linear-gradient描绘波浪线

使用linear-gradient描绘彩带

要点:通过linear-gradient绘制间断颜色的彩带

场景:主题化

兼容:gradient

实例代码:

HTML

1
2
3
<div class="bruce flex-ct-x">
    <div class="colour-bar"></div>
</div>

SCSS

1
2
3
4
5
.colour-bar {
    width: 500px;
    height: 50px;
    background-image: repeating-linear-gradient(90deg, $red, $red 50px, $purple 50px, $purple 100px);
}

效果展示:
使用linear-gradient描绘彩带

使用linear-gradient描绘方格背景

要点:使用linear-gradient绘制间断颜色的彩带进行交互生成方格

场景:格子背景、占位图

兼容:gradient

实例代码:

HTML

1
2
3
<div class="bruce flex-ct-x">
    <div class="square-bg"></div>
</div>

SCSS

1
2
3
4
5
6
7
8
.square-bg {
    width: 500px;
    height: 300px;
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
        linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
    background-position: 0 0, 20px 20px;
    background-size: 40px 40px;
}

效果展示:
使用linear-gradient描绘方格背景

使用box-shadow描绘单侧投影

要点:通过box-shadow生成投影,且模糊半径和负的扩张半径一致,使投影偏向一侧

场景:容器投影、背景补间动画1、背景补间动画2、立体投影、文字立体投影、文字渐变立体投影、长投影、霓虹灯、灯光阴影

兼容:box-shadow、filter、text-shadow

实例代码:

HTML

1
2
3
<div class="bruce flex-ct-x">
    <div class="aside-shadow">投影</div>
</div>

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
.aside-shadow {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    width: 100px;
    height: 100px;
    box-shadow: -7px 0 5px -5px $orange;
    font-weight: bold;
    font-size: 30px;
    color: $orange;
}

效果展示:
使用box-shadow描绘单侧投影

使用filter描绘头像彩色阴影

要点:通过filter:blur() brightness() opacity()模拟阴影效果

场景:头像阴影

兼容:filter

实例代码:

HTML

1
2
3
<div class="bruce flex-ct-x">
    <div class="avatar-shadow"></div>
</div>

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$avatar: "/static/codepen/thor.jpg";

.avatar-shadow {
    position: relative;
    border-radius: 100%;
    width: 200px;
    height: 200px;
    background: url($avatar) no-repeat center/cover;
    &::after {
        position: absolute;
        left: 0;
        top: 10%;
        z-index: -1;
        border-radius: 100%;
        width: 100%;
        height: 100%;
        background: inherit;
        filter: blur(10px) brightness(80%) opacity(.8);
        content: "";
        transform: scale(.95);
    }
}

效果展示:
使用filter描绘头像彩色阴影

使用box-shadow裁剪图像

要点:通过box-shadow模拟蒙层实现中间镂空

场景:图片裁剪、新手引导、背景镂空、投射定位

兼容:box-shadow

实例代码:

HTML

1
2
3
4
5
6
7
8
<div class="bruce flex-ct-x">
    <div class="img-cliper">
        <img src="/static/codepen/gz.jpg">
        <div class="mask">
            <i></i>
        </div>
    </div>
</div>

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.img-cliper {
    overflow: hidden;
    position: relative;
    img {
        width: 400px;
    }
    i {
        position: absolute;
        left: 50px;
        top: 30px;
        border-radius: 100%;
        width: 100px;
        height: 50px;
        box-shadow: 0 0 0 9999px rgba(#000, .5);
    }
    .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
}

使用box-shadow裁剪图像

使用outline描绘内边框

要点:通过outline设置轮廓进行描边,可设置outline-offset设置内描边

场景:内描边、外描边

兼容:outline

实例代码:

HTML

1
2
3
<div class="bruce flex-ct-x">
    <div class="outside-border"></div>
</div>

SCSS

1
2
3
4
5
6
7
8
.outside-border {
    outline: 10px dashed $blue;
    outline-offset: -50px;
    border: 10px dashed $orange;
    width: 300px;
    height: 300px;
    background-color: $green;
}

效果展示:
使用outline描绘内边框

以上就是今天为大家带来的你值得收藏的66个实用的css开发技巧之图形技巧的全部内容,希望对大家有帮助,下篇我们将会为大家介绍css开发技巧之组件技巧,敬请期待

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

赞(14) 打赏

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

支付宝
微信
14

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

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 1 条评论 - 你值得收藏的66个实用的css开发技巧之图形技巧

  1. 试管婴儿网 Windows 7 Chrome 77.0.3865.90

    收藏了!很赞!

博客简介

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

精彩评论

站点统计

  • 文章总数: 476 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 228 条
  • 链接总数: 15 个
  • 标签总数: 1050 个
  • 建站时间: 525 天
  • 访问总量: 8648019 次
  • 最近更新: 2019年11月21日