您现在的位置是：网站首页> 编程资料编程资料

CSS实现镂空效果的示例代码CSS实现镂空遮罩效果用纯CSS实现镂空效果的示例代码CSS3中文字镂空、透明值、阴影效果设置示例小结使用CSS实现中间镂空的图片遮罩效果CSS背景色镂空技术实际应用及进阶分享css3遮罩层镂空效果的多种实现方法

2021-09-04 1019人已围观

简介这篇文章主要介绍了CSS实现镂空效果的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

效果原理

主要利用css渐变实现一些不需要切图的背景镂空

优惠券样式

 .mixinsTicket(@width, @height, @r, @left, @lcolor, @rcolor) { width: @width; height: @height; background: radial-gradient(circle at top right, transparent @r, @lcolor 0) -(@width - @left) top ~'/' 100% 51% no-repeat, radial-gradient(circle at bottom right, transparent @r, @lcolor 0) -(@width - @left) bottom ~'/' 100% 51% no-repeat, radial-gradient(circle at top left, transparent @r, @rcolor 0) @left 0 ~'/' 100% 51% no-repeat, radial-gradient(circle at bottom left, transparent @r, @rcolor 0) @left bottom ~'/' 100% 51% no-repeat; }

 .mixinsTicket1(@width, @height, @r, @top, @color) { width: @width; height: @height; background: radial-gradient(circle at bottom left, transparent @r, @color 0) left (@top - @height) ~'/' 51% 100% no-repeat, radial-gradient(circle at top left, transparent @r, @color 0) left @top ~'/' 51% 100% no-repeat, radial-gradient(circle at bottom right, transparent @r, @color 0) right (@top - @height) ~'/' 51% 100% no-repeat, radial-gradient(circle at top right, transparent @r, @color 0) right @top ~'/' 51% 100% no-repeat; &::after{ content: ''; display: block; position: absolute; width: calc(100% - 2 * @r); left: @r; top: @top; border-top: 1px dashed #fff; transform: translateY(.5); } }

切角效果

ps: 锯齿跟设备的显示有关系

 .mixinFlag(@width, @height, @bg) when(default()) { width: @width; height: @height; background: linear-gradient(45deg, transparent sqrt(pow(@width/2, 2)/2), @bg 0) right, linear-gradient(-45deg, transparent sqrt(pow(@width/2, 2)/2), @bg 0) left; background-size: 50% 100%; background-repeat: no-repeat; } .mixinFlag(@width, @height, @bg) when(@width > @height) { width: @width; height: @height; background: linear-gradient(-45deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) top left, linear-gradient(-135deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) bottom left; background-size: 100% 50%; background-repeat: no-repeat; }

 .mixinsMark(@width, @height, @bg) { width: @width; height: @height; background: linear-gradient(-45deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) bottom left, linear-gradient(-135deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) top left; background-size: 100% 50%; background-repeat: no-repeat; }

ps:以上效果四个方向都可以实现，其他方向代码没有贴出，原理相同

格子布

 css { width: 510px; height: 128px; background: #FFF; background-image: linear-gradient(rgba(182, 128, 102, .8) 8px, transparent 0), linear-gradient(90deg, rgba(182, 128, 102, .8) 8px, transparent 0); background-size: 8px 14px, 14px 8px; }

焦点

 .mask { position: fixed; top: 0; left: 0; z-index: 100; width: 100vw; height: 100vh; background: radial-gradient(closest-side at 50% 278rpx, transparent 140rpx, rgba(0, 0, 0, .12) 180rpx, rgba(0, 0, 0, .22) 200rpx, rgba(0,0,0,.3) 220rpx, rgba(0,0,0, .4)) no-repeat; }

总结

每一层渐变都可被当做一张背景图，也就是说每一层渐变都可以指定其position、size、repeat。玩过PS的的同学应该知道图层的概念，咱们的背景图层叠原理也类似（当然，渐变也可以当背景图），控制渐变的大小，哪里需要镂空，以及需要显示的位置、是否平铺，就可以实现大多数场景下的基本效果，当然，一张切图来的更快，但是有时候切图并不能适应所有的场景。

掌握background的书写顺序可以帮助在脑海中构思自己想要的效果：

复制代码

代码如下:

background: bg-color || bg-image || bg-position [ / bg-size]? || bg-repeat || bg-attachment || bg-origin || bg-clip

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：10分钟理解CSS3 Grid布局css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

下一篇：10分钟入门CSS3 AnimationCSS3动画之利用requestAnimationFrame触发重新播放功能

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢