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实现镂空效果的示例代码

    这篇文章主要介绍了CSS实现镂空效果的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-24
  • css实现文字居中两边横线效果的示例代码

    这篇文章主要介绍了css实现文字居中两边横线效果的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-19
  • 详解CSS中position属性介绍(新增sticky)

    这篇文章主要介绍了详解CSS中position属性介绍(新增sticky) 的相关资料,position的含义是指定位类型,取值类型可以有:static、relative、absolute、fixed、inherit和stic
    2018-12-17
  • 详解css BEM书写规范

    BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。本文主要介绍了详解css BEM书写规范,非常具有实用价值,需要的
    2018-12-17
  • css如何绘制特殊图形的方法示例

    这篇文章主要介绍了css如何绘制特殊图形的方法示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-14
  • CSS 同级元素浮动分析小结

    这篇文章主要介绍了CSS 同级元素浮动分析小结的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-14
  • 详解CSS中左上朝向三角形(Top-Left Triangle)的几种制作方式

    这篇文章主要介绍了详解CSS中左上朝向三角形(Top-Left Triangle)的几种制作方式,主要介绍了三种方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编
    2018-12-13
  • 利用CSS绘制任意角度的扇形示例代码

    这篇文章主要给大家介绍了关于如何利用CSS绘制任意角度的扇形的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下
    2018-12-07
  • 使用css实现圆形波浪效果图

    这篇文章主要介绍了使用css实现圆形波浪效果图 ,需要的朋友可以参考下
    2018-12-06
  • 纯css实现元素下出现横线动画(background-image)

    这篇文章主要介绍了纯css实现元素下出现横线动画(background-image)的相关资料,需要的朋友可以参考下
    2018-12-06

最新评论