边框长度变化
先来个比较简单的,完结一个相似这样的边框作用:
这里其实是借用了元素的两个伪元素。两个伪元素分别只设置上、左边框,下、右边框,经过hover时改动两个伪元素的高宽即可。非常好了解。
div{
position:relative;
border:1pxsolid#03A9F3;
&::before,
&::after{
content:””;
position:absolute;
width:20px;
height:20px;
}
&::before{
top:-5px;
left:-5px;
border-top:1pxsolidvar(–borderColor);
border-left:1pxsolidvar(–borderColor);
}
&::after{
right:-5px;
bottom:-5px;
border-bottom:1pxsolidvar(–borderColor);
border-right:1pxsolidvar(–borderColor);
}
&:hover::before,
&:hover::after{
width:calc(100%+9px);
height:calc(100%+9px);
}
}
接下来,会开始加深一些难度。
虚线边框动画
运用dashed关键字,能够便利的创建虚线边框。
div{border:1pxdashed#333;}
当然,咱们的目的是让边框能够动起来。运用dashed关键字是没有方法的。但是完结虚线的方法在CSS中有很多种,譬如突变便是一种很好的方法:
div{background:linear-gradient(90deg,#33350%,transparent0)repeat-x;background-size:4px1px;background-position:00;}
好,突变支撑多重突变,咱们把容器的4个边都用突变表示即可:
div{background:linear-gradient(90deg,#33350%,transparent0)repeat-x,
linear-gradient(90deg,#33350%,transparent0)repeat-x,
linear-gradient(0deg,#33350%,transparent0)repeat-y,
linear-gradient(0deg,#33350%,transparent0)repeat-y;
background-size:4px1px,4px1px,1px4px,1px4px;
background-position:00,0100%,00,100%0;}
至此,咱们的虚线边框动画其实算是完结了一大半了。虽然border-style:dashed不支撑动画,但是突变支撑呀。咱们给上述div再加上一个hover作用,hover的时分新增一个animation动画,改动元素的background-position即可。
div:hover{
animation:linearGradientMove.3sinfinitelinear;
}
@keyframeslinearGradientMove{
100%{
background-position:4px0,-4px100%,0-4px,100%4px;
}
}
OK,看看作用,hover上去的时分,边框就能动起来,由于整个动画是首尾相连的,无限循环的动画看起来就像是虚线边框在一向运动,这算是一个小小的障眼法或许小技巧:
这里还有别的一个小技巧,假如咱们希望虚线边框动画是从其他边框,过渡到虚线边框,再跋涉动画。完全由突变来模仿也是能够的,假如想节约一些代码,运用border会更快一些,譬如这样:
div{
border:1pxsolid#333;
&:hover{
border:none;
background:
linear-gradient(90deg,#33350%,transparent0)repeat-x,
linear-gradient(90deg,#33350%,transparent0)repeat-x,
linear-gradient(0deg,#33350%,transparent0)repeat-y,
linear-gradient(0deg,#33350%,transparent0)repeat-y;
background-size:4px1px,4px1px,1px4px,1px4px;
background-position:00,0100%,00,100%0;
}
}
由于border和background在盒子模型上方位的差异,视觉上会有一个很明显的错位的感觉:
要想处理这个问题,咱们能够把border替换成outline,由于outline能够设置outline-offset。便能完美处理这个问题:
div{
outline:1pxsolid#333;
outline-offset:-1px;
&:hover{
outline:none;
}
}
最终看看运用到实际按钮上的作用:
其实由于布景和边框的特殊关系,运用border的时分,经过修正background-position也是能够处理的,便是比较绕。
突变的其他妙用
使用突变,不仅仅只是能完结上述的作用。
咱们继续深挖突变,使用突变完结这样一个布景:
div{
position:relative;
&::after{
content:”;
position:absolute;
left:-50%;
top:-50%;
width:200%;
height:200%;
background-repeat:no-repeat;
background-size:50%50%,50%50%;
background-position:00,100%0,100%100%,0100%;
background-image:linear-gradient(#399953,#399953),
linear-gradient(#fbb300,#fbb300),linear-gradient(#d53e33,#d53e33),
linear-gradient(#377af5,#377af5);
}
}
注意,这里运用了元素的伪元素生成的这个图形,而且,宽高都是父元素的200%,超出则overflow:hidden。
接下来,给它加上旋转:
div{
animation:rotate4slinearinfinite;
}
@keyframesrotate{
100%{
transform:rotate(1turn);
}
}
看看作用:
最终,再使用一个伪元素,将中间遮罩起来,一个Nice的边框动画就出来了(动画会呈现半透明元素,便利暗示看懂原理):
改动突变的色彩
掌握了上述的基本技巧之后,咱们能够再对突变的色彩做一些调整,咱们将4种色彩变成1种色彩:
div::after{content:”;position:absolute;left:-50%;top:-50%;width:200%;height:200%;background-color:#fff;background-repeat:no-repeat;background-size:50%50%;background-position:00;background-image:linear-gradient(#399953,#399953);}
相同的,让它旋转一同,一个单色追逐的边框动画就出来了:
Wow,很不错的姿态。不过假如是单线条,有个很明显的缺点,便是边框的末尾是一个小三角而不是垂直的,或许有些场景不适用或许PM接受不了。
那有没有什么方法能够消除去这些小三角呢?有的,鄙人文中咱们再介绍一种方法,使用clip-path,消除去这些小三角。
clip-path的妙用
又是老朋友clip-path,有意思的工作它总不会缺席。
clip-path本身是能够进行坐标点的动画的,从一个裁剪形状变换到别的一个裁剪形状。
使用这个特色,咱们能够巧妙的完结这样一种border跟从作用。伪代码如下:
div{
position:relative;
&::before{
content:””;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border:2pxsolidgold;
animation:clippath3sinfinitelinear;
}
}
@keyframesclippath{
0%,
100%{
clip-path:inset(0095%0);
}
25%{
clip-path:inset(095%00);
}
50%{
clip-path:inset(95%000);
}
75%{
clip-path:inset(00095%);
}
}
作用图与暗示图一同:
这里,由于会裁剪元素,借用伪元素作为布景进行裁剪并动画即可,运用clip-path的优点了,切开出来的边框不会发生小三角。一起,这种方法,也是支撑圆角border-radius的。
假如咱们把别的一个伪元素也用上,实际完结一个按钮样式,能够得到这样的作用:
border-image的妙用
便能够使用border-image-slice及border-image-repeat的特性,得到相似的边框图画:
div{width:200px;height:120px;border:24pxsolid;border-image:url(image-url);border-image-slice:32;border-image-repeat:round;}
在这个基础上,能够随意改动元素的高宽,如此便能扩展到任意大小的容器边框中。

css

css代码怎么设置虚线分割线

在网页布局中,有时为了全体网页的漂亮,咱们需求设置不同的边框样式。那么怎样设置边框的虚线样式?本篇文章就给大家介绍css设置边框虚线样式的两种方式。有一定的参考价值,有需求的朋友能够参考一下,希望对你有所帮助。
首要要知道在css中咱们是运用border特点来设置边框的,它能够经过设置边框的宽度、色彩、圆视点、样式(实线、虚线、双线等等)。
下面咱们经过简略的代码示例来具体看看css的border边框特点是怎样设置边框虚线的。
.box1{undefined
border:4pxdashedpalegoldenrod;
padding:10px;
}
.box2{undefined
border:5pxdottedpink;
padding:10px;
}
这是一段测验文字1,完成虚线边框
这是一段测验文字2,完成虚线边框
作用图:
咱们能够看出,cssborder边框特点能够设置两种不同的边框的虚线样式,分别是经过border边框特点中dotted跟dashed两个特点值设置的。下面咱们来看看border设置这两个特点值的作用:dashed:能够界说虚线,这样边框就能够呈现扁状的虚线样式。
dotted:界说点状边框,使得边框呈现连续的点状,从而完成边框的点状虚线样式。
注:所有浏览器都支撑border特点,不必忧虑兼容性。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注