你值得收藏的66个实用的css开发技巧之图形技巧
上面我们介绍了色彩技巧相关知识,本文将为大家带来的是你值得收藏的 66 个实用的 css 开发技巧之图形技巧。
Figure Skill 图形技巧
使用 div 描绘各种图形
要点:<div>配合其伪元素(::before、::after)通过 clip、transform 等方式绘制各种图形
场景:各种图形容器
兼容:clip、transform
实例代码:具体查看我之前整理css 优雅的画出形状图形
使用 mask 雕刻镂空背景
要点:通过 mask 为图像背景生成蒙层提供遮罩效果
场景:高斯模糊蒙层、票劵(电影票、购物卡)、遮罩动画
兼容:mask、perspective、transform-style、animation
实例代码:
HTML
<div class="bruce pr flex-ct-x"> <div class="mask-layer"></div> </div>
SCSS
$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%; } }
效果展示:
使用 linear-gradient 描绘波浪线
要点:通过 linear-gradient 绘制波浪线
场景:文字强化显示、文字下划线、内容分割线
兼容:gradient
实例代码:
HTML
<div class="bruce flex-ct-x"> <p class="waveline-text">波浪线文字</p> </div>
SCSS
@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 绘制间断颜色的彩带
场景:主题化
兼容:gradient
实例代码:
HTML
<div class="bruce flex-ct-x"> <div class="colour-bar"></div> </div>
SCSS
.colour-bar { width: 500px; height: 50px; background-image: repeating-linear-gradient(90deg, $red, $red 50px, $purple 50px, $purple 100px); }
效果展示:
使用 linear-gradient 描绘方格背景
要点:使用 linear-gradient 绘制间断颜色的彩带进行交互生成方格
场景:格子背景、占位图
兼容:gradient
实例代码:
HTML
<div class="bruce flex-ct-x"> <div class="square-bg"></div> </div>
SCSS
.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; }
效果展示:
使用 box-shadow 描绘单侧投影
要点:通过 box-shadow 生成投影,且模糊半径和负的扩张半径一致,使投影偏向一侧
场景:容器投影、背景补间动画 1、背景补间动画 2、立体投影、文字立体投影、文字渐变立体投影、长投影、霓虹灯、灯光阴影
兼容:box-shadow、filter、text-shadow
实例代码:
HTML
<div class="bruce flex-ct-x"> <div class="aside-shadow">投影</div> </div>
SCSS
.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; }
效果展示:
使用 filter 描绘头像彩色阴影
要点:通过 filter:blur() brightness() opacity()模拟阴影效果
场景:头像阴影
兼容:filter
实例代码:
HTML
<div class="bruce flex-ct-x"> <div class="avatar-shadow"></div> </div>
SCSS
$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); } }
效果展示:
使用 box-shadow 裁剪图像
要点:通过 box-shadow 模拟蒙层实现中间镂空
场景:图片裁剪、新手引导、背景镂空、投射定位
兼容:box-shadow
实例代码:
HTML
<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
.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; } }
使用 outline 描绘内边框
要点:通过 outline 设置轮廓进行描边,可设置 outline-offset 设置内描边
场景:内描边、外描边
兼容:outline
实例代码:
HTML
<div class="bruce flex-ct-x"> <div class="outside-border"></div> </div>
SCSS
.outside-border { outline: 10px dashed $blue; outline-offset: -50px; border: 10px dashed $orange; width: 300px; height: 300px; background-color: $green; }
效果展示:
以上就是今天为大家带来的你值得收藏的 66 个实用的 css 开发技巧之图形技巧的全部内容,希望对大家有帮助,下篇我们将会为大家介绍css 开发技巧之组件技巧,敬请期待
码云笔记 » 你值得收藏的66个实用的css开发技巧之图形技巧
收藏了!很赞!