CSS实现镂空效果的示例代码
发布时间：2018-12-24 15:44:48 作者：sex_squirrel 
我要评论
我要评论这篇文章主要介绍了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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了CSS实现镂空遮罩效果,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-08-20
这篇文章主要介绍了用纯CSS实现镂空效果的示例代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-25- 这篇文章主要介绍了CSS中文字镂空、透明值、阴影效果设置示例小结,其中通过text-stroke-color透明值的设置可以让文字在某些程度上更加柔和,需要的朋友可以参考下2016-03-07
- 这篇文章主要介绍了使用CSS实现中间镂空的图片遮罩效果的方法,文中同时附带介绍了一个用CSS3实现的镂空一个圆形的代码示例,需要的朋友可以参考下2015-12-24
- 这篇文章主要介绍了CSS背景色镂空技术实际应用及进阶相关资料，需要的朋友可以参考下2013-10-10
这篇文章主要介绍了css3遮罩层镂空效果的多种实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2020-05-11
最新评论