纯css完成动态性边框的示例编码

日期:2021-03-17 类型:科技新闻 

关键词:怎么把小程序变成二维码,微信小程序怎么开通,微信小程序csdn,小程序开发,网络答题小程序

情况

这几日工作中中遇到1个互动要求,规定完成1个实际效果,当电脑鼠标移入1个元素的情况下,元素出現1个动态性的边框,如图:

 

动态性边框

思路

看到这个实际效果,我最先想起的是设定元素的border特性,可是border不可以设定长度,没法完成动效。此外1种完成思路是加上4个div来各自完成左右上下的边框实际效果,尽管可行,可是要加上4个附加元素,有点儿因小失大的觉得。难道说就沒有更好的处理计划方案了...

就在我煞费苦心的情况下,灵光乍现,为何不尝试1下用CSS3多情况来仿真模拟边框呢,情况是能够设定长度的,根据改动情况的长度,便可以完成规定的动效。说干就干,赶紧从在网上检索1下CSS3情况的有关专业知识。

CSS3 Background

CSS3针对 background 做了1些改动,最显著的1个便是选用设定多情况,不仅加上了4个新特性,而且还对现阶段的特性开展了调剂提高。

1、 好几个情况照片

在CSS3里边,你能够在1个标识元素里运用好几个情况照片。编码相近与CSS2.0版本号的写法,但引入照片之间需用“,”逗号分隔。第1个照片是精准定位在元素最上面的情况,后边的情况照片先后在它下面显示信息,以下:

background-image: url(image1.jpg), url(image2.jpg), url(image3.jpg);

2、新特性:Background Clip

background-clip 说白了,情况裁切,用来设定元素的情况(情况照片或色调)是不是拓宽到边框下面。

  • background-clip: border-box; 情况拓宽至边框外沿(可是在边框下层)
  • background-clip: padding-box; 情况拓宽至内边距(padding)外沿。不容易绘图到边框处
  • background-clip: content-box; 情况被剪裁至內容区(content box)外沿
  • background-clip: text; 情况被剪裁成文本的市场前景色(试验特性,必须加访问器前缀)

3、新特性: Background Origin

此特性必须与 background-position 相互配合应用。你能够用 background-position 测算精准定位是从border,padding或content boxes內容地区算起。(相近 background-clip

  • 留意:当应用 background-attachment 为fixed时,该特性将被忽视不起功效。
  • background-origin:border-box; 从border边框部位算起
  • background-origin:padding-box; 从padding部位算起
  • background-origin:content-box; 从content-box內容地区部位算起;

4、新特性:Background Size

Background Size特性用来设定情况照片的尺寸。有几个特性值:

  • background-size: contain;变小情况照片使其融入标识元素(关键是像素层面的比率)
  • background-size: cover;让情况照片变大拓宽到全部标识元素尺寸(关键是像素层面的比率)
  • background-size: 100px 100px;标出情况照片放缩的规格尺寸
  • background-size: 50% 100%;百分比为依据內容标识元素尺寸,来放缩照片的规格尺寸

5、Background Repeat 调剂

CSS2里当设定情况的情况下,它常常被标识元素截取而显示信息不全,CSS3详细介绍了2个新特性来修补此难题。

  • background-repeat: space; 照片以同样的间隔平铺且填充全部标识元素
  • background-repeat: round; 照片全自动放缩直至融入且填充全部标识元素

6、Background Attachment 的调剂

Background Attachment有了1个新特性值: local ,当标识元素翻转时它才合理(如设定 overflow: scroll; ),当 background-attachment 设定为 scroll 时,情况照片是不随內容滚条翻转的。如今,有了 background-attachment: local ,便可以保证让情况随元素內容翻转而翻转了。

7、新增 Background Blend Mode情况的混和方式是当情况重合时测算像素最后色值的方式,每种混和方式选用市场前景和情况色调值(各自为顶部色调和底部色调),实行其测算并回到色调值。最后的可见层是对混和层中的每一个重合像素实行混和方式测算的結果。 background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;

每种混和实际效果参照: https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode

CSS3 多情况仿真模拟元素边框

大家这里关键应用了 background-imgbackground-sizebackground-position 3个特性。

background-image: [background-image], [background-image], [background-image]; 
background-position: [background-position], [background-position], [background-position]; 
background-repeat: [background-repeat], [background-repeat], [background-repeat]; 

简写方式以下:

background: [background-image] [background-position] [background-repeat], 
[background-image] [background-position] [background-repeat], 
[background-image] [background-position] [background-repeat]; 

如今大家用多情况来仿真模拟1个元素的边框

/*CSS*/
.exammple {
    background: linear-gradient(0, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(⑼0deg, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(⑴80deg, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(⑵70deg, #108b96 2px, #108b96 2px) no-repeat;
    background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
    background-position: left top, right top, right bottom, left bottom;
}
<div class="exammple"></div>

大家用4个渐变色的情况来仿真模拟4个边框(为何大家要用渐变色而并不是立即的Color呢?这是因为CSS的多情况只能是 background-imagebackground-color 不适用好几个值,全部就算是单色的边框,大家也只能应用渐变色)。

 

基本实际效果

接下来大家让边框动起来

/*CSS*/
.exammple {
    transition: ease-in .3s;
    background: linear-gradient(0, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(⑼0deg, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(⑴80deg, #108b96 2px, #108b96 2px) no-repeat, 
                linear-gradient(⑵70deg, #108b96 2px, #108b96 2px) no-repeat;
    background-size: 0 2px, 2px 0, 0 2px, 2px 0;
    background-position: left top, right top, right bottom, left bottom;
}
.exammple:hover {
    background-size: 100% 2px,  2px 100%, 100% 2px, 2px 100%;
}

如今大家早已按规定完成了互动实际效果。

总结

相比border特性,用background的仿真模拟边框存在下列的优点和缺点

优点 缺点 能够操纵宽高,渐变色色,健身运动方位等,灵便多变,能完成许多border不可以完成的实际效果,而且无需加上附加的元素 不可以完成border圆角

必须留意的是 background仿真模拟的边框不等同于于真实的边框,是不占有边框的宽高的,测算盒子实体模型时要留意

最终

因为CSS3对情况特性的进1步丰富多彩,运用CSS3的多情况能够完成许多之前务必依靠js或照片才可以完成的实际效果,例如半全透明情况、几何图形图案设计情况、条纹情况等,希望和大伙儿1块儿去探寻CSS的秘密。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:web器皿怎样自融入视口尺寸 返回下一篇:没有了