css怎么实现流动边框

啊啊。

今天给大家分享一个流光边框的 c s s 效果，这种绚丽的流光动画效果，看起来是不是感觉用 c s s 很难实现啊，其实不然，拆分一下就会变得很简单，可以分成三个部分， 白色盒子包裹着黑色盒子，中间还有一个中心渐变的盒子，让中心渐变的盒子进行旋转，白色盒子设置一个超出隐藏就可以实现，是不是非常的简单。接下来让我们用 css 来实现这个效果。首先我们有一个 drv， 给 drv 设置宽高、颜色等技术属性， 然后利用 b for 选择器来写一个小一点的盒子，这里的话我们用定位来确定位置。再然后用 off 选择器来写渐变盒子，这里需要把宽高设置成百分之三百，来确保旋转的时候能完全覆盖里面的小盒子。然后设置层级关系，把大盒子用定位来居中显示。 最关键的来了啊，就是用百合鼓让的引妹子来设置一个中心渐变的背景图，然后再跟 drv 设置 overhaul hide 来隐藏超出位置，这样就实现了静态的效果。我们先不加 overhall hide， 直接来添加一个旋转动画，五秒线性且重复的动画， 哎，是不是有点意思了。然后打开超出隐藏，再隐藏背景，就完美的实现了流光边框的效果。在框内呢也可以随意的添加内容，如果觉得单色的渐变流光比较单调的话，也可以设置成花里胡哨的渐变。 今天的分享到这就结束了，感谢大家的观看，喜欢的话可以点赞支持，感谢大家。

大家好，这个视频我们来做一个动态边框的效果，大家看到有一张麦克桌等的球衣卡片，并且边框有两个渐变颜色在运动，我们来做一下这个呆萌 html 呢，比较简单，大家看一下就可以了，样式上面写了一些基本的剧中样式。先来看一下 现在就一张背景图，其他样式呢，我们重新来写。先来控制一下外面这个 boss， 它的大小呢，让它三百乘以四百 二十像素的圆角，再设置一下里面的元素居中。这里呢复制一下 这个就改成 center。 再来做一下那个动态的边框，那个边框呢，我们用两个尾元素来做，大小呢， 五百乘以五百这个动态边框这里我们是用锥形渐变来实现这个效果的，里面呢放四个颜色，但是有三个呢都是用透明 这样子最后过渡出来的这个颜色哈，他的大小范围呢，就刚刚好了。来看一下这个大小和位置呢，有点问题， boss 单面呢，给他来一个相对定位 left 呢，给他两百像素。下面这里要给他一个绝对定位哈， 现在大小和位置呢，没有问题了，我们这里是做了两个伪元素的哈，只不过呢，他们做了绝对定位，所以呢重叠在一起了，加个动画，让他们旋转起来就可以看得到效果了，线性循环，然后 我们来定义一个叫 action 的关键针，就让他从零度旋转到三百六十度就可以了。 现在就可以看到他们动起来了哈，给其中一个呢加一个岩石， 这样子呢，可以看到他们错开来旋转了来看一下，不过这样子呢，每次刷新都要等第一个旋转一点五秒才可以给他复的，这样子呢，他一上来呢就可以同步旋转了， 好， ok， 这个渐变颜色呢，可以给他单独来改一下，好再把溢出来的给他隐藏掉， ok， 这样子呢，就只可以在这个范围里面来进行旋转了，然后我们来做中间部分给它覆盖住，只露四周的边框就可以了。 先设置个绝对定位，然后四个方向呢，都是五个像素，加点圆角还有背景颜色层级给他提一下， 现在中间部分就覆盖住了，只露了四周的边框，再来把剩下文字的部分给他设置好就可以了。来控制一下 h 二和 h 三。 top 这里给它一百一十像素，颜色呢？黑色还有字体大小十个 e m 这个层级 还要高一点。来看一下上面，这里呢，还要单独给他控制一下 h 三，他的字体大小小一点，然后呢往上面来挪一下哈， top 三十就可以了。再改一下字体颜色再来看一下，再把他们居中就差不多了。这里呢把它复制一下， 看这里给他居中设置一下哈， ok， 二十三，这里呢我们给他描个白边， 这里给他设置两个像素的白色的边。好，再来看一下这里呢刷新， ok， 我们这个实力呢就到这里感谢大家的收看。

哈喽，大家好，今天的话就简单做这样一个流水灯边框的这样一个效果，也就是说这个边框会像一个灯带一样进行一个流水灯的这样一个旋转，好吧，好，话不多说，直接开始这个上代码了，一上来的话就只有一个简简单 当当的一个盒子，就一个 div， 然后里面装了这个我们的今天标题，好吧？然后剩下的就是那个用皮肤的 aft 去做剩下的其他的操作了，然后就看这个四 s 的部分。 csi 的话一上来就是常规的一些初始化操作，然后我们让他常规的一个居中显示，给了一个简单的背景颜色，对吧？然后就是这个复合的区域了， 然后这个盒子的话一上来我们是让他有一个超出的部分给他隐藏掉，因为下面的话等会是其实是会超出整个复合者的部分的，所以我们让他等会隐藏掉，现在先这样看方便看一下，好吧？ 然后我们让它撑开这个负荷子的大小，也就是用拍进去撑开，因为我们本来就是这个文字的部分，所以是用拍进去把它撑开的，好吧？然后 拍点放回来，用拍点撑开之后给了一个小圆角，然后给了一个文字的颜色，文字的大小，是吧？就是一个文字，然后给了圆角的放框，对吧？ 然后给了一个简单的定位，我们让他这样一个显示的层级是在相对来说是在最上面就是这是零，然后下面有一个负二，有一个负一，也就是说这个负荷子这个 box 相当于是一个负荷子，然后就让他显示的层级在最上面，因为这个文字在最上面，对吧？ 然后下面就是 b four 跟 after 的部分， b four 的话其实就是我们这个，我们把这个放回来，我们把这个 over four 放回来。 b four 的话，其实就是我们整个这个灯，这灯效的这样一个效果，就是我们先让它宽高都超到这个百分之两百，对吧？也就是超过这个整 多的区域，复合的区域。然后我们给了一个基础的背景颜色，也就是这个基础的一个比较淡的一个颜色，对吧？然后我们给了一个这这一个东西，它它是什么呢？它就是围绕中心点旋转的一个渐变， 之前我有线性渐变，有那种镜像渐变，对吧？这一个渐变的话就是一个围绕中心点，然后围绕中心点旋转的一个渐变， 然后我们给了一个这样一个呃，蓝色的一个渐变，对吧？我们把它定位到中间来，然后让他显示的层级是在负二，也就是最底层，然后给了一个旋转的动画，就是让他旋转一圈一圈的旋转，对吧？然后下面就是这个 after 部分， 我们再把这个 overflow 放回来，下面就是这个 after 部分。 after 的话其实也比较简单，他也就只是一 个覆盖，覆盖默认的这个东西，我们先让他，我们先让他把他注视掉，也就正常情况，他是这样的，对吧？然后我们把他往内部撑开一个盒子，就是撑开一个依维命这样这样一个边框出来，对吧？ 然后让他背景颜色是纯黑的，然后让他同样会有一个圆角的部分，也就是说里面这一个黑的内部这一片区域就是把下面那一部分盖住了，对吧？就是我们通过这个 zindax 是负一，然后就会盖住这个负二这一层，对吧？然后就这么简单。 呃，今天这个效果非常简单，代码也相对来说非常少。然后的话也没什么特别难的地方，就是多了一个这样一个渐变，就是这个渐变，对吧？没以前没用过好，就这么 个东西，就这么个东西其实非常简单，对吧？好。代码的话我会放在视频简介的下方，如果找不到代码的话就可以评论或者私信我，好吧？ 然后我现在有放一个视频的玉兰链接在下方，对吧？然后大家就可以去提前先看一看，就是我做出来的效果跟你们做出来的效果有没有区别？好吧？好，就这么多了，拜拜。

通过 c s s 渐变背景制作卡片光效边框。先简单过一遍 c s s 三渐变背景的知识。 c s s 三的背景渐变是在 background image 里设置的，主要包含线性、镜像、焊、锥形三种渐变。 线性渐变就是颜色沿着某条直线渐变过渡，镜像渐变就是颜色以某个圆心开始向外过渡渐变。锥形渐变是颜色围绕中心点旋转渐变。通过以上知识点，我们就可以进行以下操作， 先准备这样的一个卡片盒子，随便给点样式并居中对齐一下。 通过这段锥形渐变，我们可以得到这样的背景， 给他加一个 hover 旋转动画，再把内容部分覆盖上就搞定啦。 这个流光边框效果其实汉之前的充电特效有异曲同工之处，都是通过 overflow， hidden 隐藏一些动画元素来实现的。知识是 c 的，需求是活的，举一反三才能更好地进步。 下面来讲第二种发光边框。先准备这样的一个卡片盒子，随便给点样式并居中对齐一下， 复制一个看卡片一一样的边框。 背景图层和边框图层的样式几乎一模一样，但是当给背景图层加上 filter blur 十 p x 后，就会发现边框发光了，但这本质是背景图层被模糊了视差，导致看起来像边框发光。 最后也给卡片二写个 hover。 今天的视频到这就结束啦，求关注老爷的点赞、关注和评论。

必须培养一些爱好来支撑生活的疲惫和琐碎，哪怕是随拍路边的花草，都能让生活充满期待和快乐，用生活治愈生活，搞错了再来。

这节课来学习元素的浮动以及清除浮动。看字面意思就知道，浮动是漂浮于其他元素之上，应该是拖累了正常的文档流。 前边讲定位时，绝对定位是完全拖累了文档流，浮动跟他有什么不同呢？我们先接着往下看， 浮动有左浮动和右浮动，左浮动就是从左边水平开始往后排，遇到宽度不够的就换行。右浮动就是从右边开始水平排，一直往左，宽度不够再换行。来看代码，这里一个 d iv 签到，两个 d iv 看浏览器效果。 外边的 div 有边框，里边的两个 div 设置的背景色，他们是按照正常的文档流来展示的。两个 div 都是会计元素，都是独占一行， 所以上下排列。现在通过浮动让他们俩一个在左，一个在右。来看样式设置，给 dnv 设置浮动， 左边，这个右边看效果。 这就打破了他们组战银行的规则，一个向左浮动，一个向右浮动，这个窗口无论多宽多窄，都是一个始终在左，一个始终在用。你可能会说，那我使用绝对定位也是不是可以达到这种效果？来试一下打回绝对定位， 这个价位决定定位， 他是左边来口，他是零，这是右边 red 零 来看效果也是一个在左，一个在右。仅仅说这个场景，他俩是都可以的，这仅仅是两个元素，一左一右，但如果是 三个四个多个元素呢？我们不能把每个元素都计算他的位置来展示，所以这时候就不能用绝对定位了。浮动不需要指定他的位置，只要把每个元素指定为浮动的，比如向左浮动，那么这些元素就会从左向右依次排列来看，另一端代码比刚才的多了两个 dnb， 并且都设置为向左浮动来看效果，他们四个从左往右依次排列，宽度不够就换行。 购物网站的商品陈列就是这样实现的。给他们设置了浮动之后，我们会发现他们负极的高度没有了，上下边框重合了，这是高度塌陷，也就是说这些元素没有把他负极元素撑起来，这就是浮动造成的结果。需要在最后清除一下浮动， 可以这样清除，在最下边再加一下第二音，设置他的样式， 可乐 boss 他可以设置清除左边还是右边，或者都清楚来看效果，这样负极的高度又撑起来了。好了，浮动就讲到这里，我们下节课见。

好，各位学前的同学，注意看这个效果里边的那些线啊，这个效果你没有一点想象力的话，你还真做不出来，没有那么轻松的哈，注意看这个线，他会随着鼠标的位置呢，会有一个高亮。怎么做呢？我们一边做呢，一边分析这个实现思路。首先呢，你需要有一个网格布局啊， 不管你用网格布局还是用别的什么布局，总之呢，把它布局成这个样子啊，就是一个容器里边有些卡片，每个卡片里边有一个内容啊，写完没了，然后到 cs 里边去了，首先找到每一张卡片， 给每一张卡片呢，我这里呢去设置一个背景啊，比方说我们这里呢用个半透明的白色吧，二五五二五五二五五零 点一。好，你看一下啊，这个背景是不是出来了，我们现在记一笔啊，每一张卡片的背景呢，是我们的第一层半透明的白色背景。好，接下来我要给这个卡片里边的这个音乐，就这个东西，我要把它变成绝对 定位，给他盖上去。好，那么我们把卡片呢设置为相对定位，你可能不知道为什么要去这样做啊，我做完了过后呢，你就彻底理解了，他是一个绝对定位，然后呢，我给他设置一个背景颜色，比方说随便来一个比较深的颜色吧，然后呢他的尺寸呢，给他设置一个 inset 为两个像素。这啥意思呢？就表示 left 的两个像素， top 两个像素， right button 两个像素。就说这个元素啊，它是一个绝对定位的元素，它在复原数里边呢，基本上是充满的状态，只是距离复原数的四个方向上呢，留了两个像素的空隙，那么这样一来会产生一个什么样的效果呢？保存看一下，哎， 这个边就出来了啊，你们看不清楚的话，我们把这个颜色来调一下啊，调成红色，他更看不清楚了，是吧？你看一下这个边框是不是出来了，所以说这个边框呢，他并不是一个 boder， 而是第一层那个半透明的背景显现出来的，也就是说在第一层上边呢，我们又套了一层，这一层呢，我们姑且把它叫做第三层，为什么不叫第二层呢？因为 一会呢他会出现第二层。这个呢是一个深色背景啊，我们目前呢用的是红色啊，把调一下啊，调成一个深色，就二二二吧。保存看一下这个边框是不是就出来了，这边框哪来的？就是第一层那个背景显现出来的啊，然后我们把第三层呢再稍微的去设置一下啊，一些边角料的一些属性啊，比方说像什么 boder， redos 啊， 继承复原数是吧，然后再去设置一个什么文字剧中啊，这些玩意你去设置吧，那都无所谓的好，于是呢，做出来了这么个样子，接下来我要在第三层和第一层之间去夹一个第二层， 第二层呢是一个伪元素，我们给这个 card 呢加一个伪元素啊， card e four， 它也是绝对定位。然后这个伪元素的尺寸呢，跟复元素这个 card 呢是一样的啊，宽高撑满。由于它是第二层，所以呢，我们要控制一下 zintex， 我们把上边这个婴儿的 低音，这个时候呢设为三啊，因为他第三层嘛，然后第二层呢，是这个啊，设为一个二啊，复原数呢，是第一层。好，然后呢，我们再给他一个 位置 left 零 top 零，然后呢，给他设置一个背景颜色，比方说红色吧，别人你们先看得清楚再说，保存，你看一下，目前是这个样子，对吧？啊？博特 redis 呢？继承一下吧。好，再看一下啊。那么现在呢，就多了一个第二层了啊，第二层其实就是高亮边框，第二层呢，夹在第三层和第一层之间，所以呢，第三层的东西呢，会覆盖第二层，但是第二层的东西呢，会覆盖第一层， 知道我想干嘛了吗？现在呢，第二层东西呢，他的坐标是零和零，那么这个坐标呢，指的是什么呢？指的是第二层元素左上角的坐标，我们要把这个坐标调换一下， 分成第二层元素的中心点坐标。就说啥意思呢？我这里设置 left 零 top 零是指的是这个元素它中心点在这个位置，而不是左上角。 这件事呢，好说，我们给他设置个圈式缝圈式 next， 偏移支撑宽度的一半，向上偏移支撑高度的一半，保存看一下。哎，那么这样子呢，这个位置零和零，他就变成了这个第二层元素的中心点坐标了。然后接下来我们去设 设置一下啊，这个 card 给他加上一个 overflow， 嗨的溢出隐藏，你看一下，有点意思了，是吧？那么接下来问题就是这个第二层的元素啊，他的背景他不应该是红色，对吧？那应该是什么颜色呢？他其实是一个渐变背景， 一个镜像渐变，从圆心开始，一个半透明的白色渐变到完全透明，保存你看一下。哎，这效果就出来了是吧？哎，你还可以去稍微的控制一下细节，比方说给他加上一个 closes side 啊，表示这个圆的半径呢，以最短边作为半径啊，这些都小细节啊，你去控制一下， 二呢，你要搞定这些小细节的前提条件是要你对这些基础知识呢有熟练的掌握，你知识掌握的越牢固，解决问题的手段就越多，解决问题的速度呢也就越快。 cs 是这样， gs 也是这样，整个前端都是这样，要达到这样的能力，那么你就要来看一看我们的大师课，这个课程呢是完全免费的啊，来领取就完事了。大师课呢是我花了一周的时间录制出来的课程，我没有办法把全 不前端的知识塞进去，但是我塞的都是前端最重要最核心也是最值钱的知识。可以说大师课里边我讲过的内容但凡有一个你没有搞清楚，那么在这个行业里边你很难有一个好的发展。所以你要做的第一是来免费领取咱们的大师课，第二呢是认认真真的花一周时间把它好好的学完， 学完之后你将来要学什么样的前端知识，学到什么样的程度，将来的职业发展之路怎么走你就完全清楚了。所以呢，还没有领取大师课的同学啊，现在还可以免费领取，怎么领进咱们评论区第一条，然后呢，加入我们的粉丝群，根据提示领取就完事了。好，这样写了过后呢，我们来看一下啊，就这个样子出现了。好， 现在的问题是啥呢？我得设置这个坐标，这坐标不能老是零和零，对吧？他要跟着鼠标走，因为我们这里有六张卡片，比方说我鼠标指着这个位置，那么就意味着啥呢？所有的卡片的第二层都要跑到这个位置，那么这一块呢，我们怎么来做呢？我们可以设置 cs 变量，我们比方 说吧，这个 left 呢，我们来自于一个 cs 变量 x 啊，如果说你没有给我的话，我给一个默认值啊，一个看不见的默认值，比方说付了一千个像素，这里的 top 也是一样啊，你看现在这些 ai 工具啊，特别好用，只要你给了他一个思路和方向，那些具体的实现细节呢，他就会辅助你去完成的，关键是思路和方向，你方向不给他，他是蒙的。 接下来我们就需要在 gs 里边去监控鼠标事件，设置每一个卡片的 x 和 y， 好到 gs 里边去找到这个容器，然后呢，找到所有的卡片，接下来我们给容器呢注册鼠标移动时间，当我们鼠标在容器里边移动的时候呢，我们要给每一个卡片去设置 x 和 y， 比方说鼠标只在这里，那么对第一个卡片而言，那么 xy 呢？就差不多是零和零， 是对第二个卡片而言，它的 x， y 呢，就应该是负的多少多少多少，对吧？所以呢，对每一个卡片的 x， y 呢，它应该是鼠标相对于四口的位置和那个卡片本身在四口的位置联合计算出来的，因为我 不要算出鼠标相对于每一张卡片的位置，能懂这个意思吧。所以呢，我们要循环所有的卡片，拿到这个卡片在四口里边的尺寸和位置信息，那么就可以算出一个 x， 他来自于什么呢？来自于鼠标相对于四口的位置，减去卡片相对于四口的位置，那么是不是就算出来了这个鼠标相对于卡片的 的位置，同样道理呢，我们可以算出 y， 那么有了 x 和 y 之后呢，是不是我们就可以去设置这个卡片的 c s s 变亮了 x， 然后 y 保存，你看一下现在我们鼠标移动是不是这个效果就出来了？因为我们移动鼠标的时候呢，我们就给每一个卡片呢去设置了它的 x 和 y， 那么受这个 x 和 y 的影响呢？在 c s s 里边，它就会把这个第二层移动到相应的位置， 移动到相应的位置，那么这个效果自然就出来了，这就是边框高亮的效果啊。之后呢，如果说你们在开发中遇到了这样的效果的话，就这种思路去实现。