js边框动态效果

好，各位学前的同学，注意看这个效果里边的那些线啊，这个效果你没有一点想象力的话，你还真做不出来，没有那么轻松的哈，注意看这个线，他会随着鼠标的位置呢，会有一个高亮。怎么做呢？我们一边做呢，一边分析这个实现思路。首先呢，你需要有一个网格布局啊， 不管你用网格布局还是用别的什么布局，总之呢，把它布局成这个样子啊，就是一个容器里边有些卡片，每个卡片里边有一个内容啊，写完没了，然后到 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 里边，它就会把这个第二层移动到相应的位置， 移动到相应的位置，那么这个效果自然就出来了，这就是边框高亮的效果啊。之后呢，如果说你们在开发中遇到了这样的效果的话，就这种思路去实现。

有的人， 有你的人， 有一个人。

面是绝，你还有什么事好关心，但各自不再像在和平。我终于被提醒过这社会时的时候 的话今天令我无言。 两个字，比在心上和平我终于被提醒过这社会时代前途银行 被虐，对方的爱情。 呦呦呦， 哎呦，你大学教你的？哎呦，我生下来就会了你不知道哎呦屁的 哎呦不错， 就是你没话讲了都可以。哎呦 年死绝，你还有什么时候关心，但各自不再像在和平我终于被提醒我这社会实在是有病。我用漂亮的言语形容被掠夺 来的还清。 thus there's so many time out there in the sky quite as you keep my drivers up。

今天我们使用扎 script 来实现鼠标右键打开一个菜单，并且设置菜单的位置跟随鼠标的效果。 首先我们把元素的基础样式设置好，未来使元素的位置能够动态改变。这里我们给 ul 设置了跑 c 审文 fixture， 这是的效果是这样的，为了是鼠标右键的时候展示出来菜单，所以我们需要默认给菜单设置隐藏，这里设置 dcplayeuryno， 这时候他就已经从页面上隐藏掉了。接下来我们需要设置 ds。 首先监听页面的右键事件， 这里使用爱的英文特类似脑来监听事件，它有三个参数，这里我们只说前两个。第一个参数是事件类型，鼠标右键的事件类型是 context menu。 第二个参数是事件回调函数，也就是 当出发这个事件，我们需要执行的内容回掉函数。有个事件参数我们给他定为一，当我们鼠标在浏览器上右键时，会有默认行为，打开浏览器的默认弹窗， 就像这样，显然我们是不需要的。先在事件回调函数中禁止这个默认行为，这时候鼠标右键不会有任何反应了。接下来设置需要执行的内容，首先找到这个菜单元素，并让它显示出来， 然后设置元素的位置为鼠标点击的位置是设置元素的定位 left 和定位套路。 最后我们的效果就实现了，希望这个视频对你有所帮助。

to the drama， only charge it to the things that open you try and the crypts and the kkk but if you're on the air love or you're on me only generates hate and then you hate then you're bound to get out of it the eye goes and operates when you got it to the love yo yo the love yo yo the love yoyo the love yoyo the love yoyo the love yo yo can you practice what you preach at what you turn the other chief， father， father， father help us and some father， father， father， love and lovely the whole world is addicted to the drama， only charge it to the things that open your trauma overseas yeah we try to stop the terrorism the crypts and the k k k but if you're on the other for your only so gravitate the love yoyo the love the love yo yo the love yo yo the love yoyo the love yoyo to the love yo yo to the love yo yo can you practice what you preach at what you she father father， father help us。

学习时间了啊，那这个结构我已经写好了啊，由于这个结构非常简单啊，大家看一下啊，今天我们学这个知识点呢，就是利用杰斯动弹血染大母啊，动弹血染大母， 那么这是哪个知识点呢？相当于就是我们，我们看一下啊，我们看一下，今天我们学什么呢？就是动态把这里个 啊，我们这个电脑啊，手机啊， u 盘啊渲染上去啊，那么怎么都谈渲染呢？大家可以看一下啊，这里边我是不是展示有三个 div 啊，对不对？ 换照以往我们是不是这样，这样我们是写死的呀，对吧？我们手动敲三个 div， 对不对？那现在的话，比方说我要输一个什么呢？比如说我要输一个显卡，对吧？我要输个显卡，那好，大家都知道我的功能是什么呢？当光标移开的时候，也就是这光标消 装饰的时候，我是不是要把这个鞋卡从到这个啊，这个本地数据库里面啊，对吧？然后当我的光标再次迎上去的时候，这个鞋卡就能出来，对不对？然后这样的当然现在没有上去啊，没有选上去，为什么呢？因为我光标没有再次引入，现在只是重到了本地数据库，对吧？ 现在只是存到了本地数据库啊，然后我这一入的时候是不是就把它铺饰上去了啊，就把它这个收纳到这个啊框框里面了，相当于什么呢？看看到没有？相当于我动态炫耀了一个 div 啊，那我们今天就啊讲一下这个动弹血染这个啊点位，那动弹血染点为为什么说我这边放了一个动弹血染的弹幕呢？啊？为什么说弹幕呢？对不对？为什么呢？因为我帮在里边知道吧 帮在里边我所敲的这些标签啊，不管你是 div 啊，还说是 spa 啊，还说是 spa 啊，还说是 spa 啊，都是标，都是啊，叫做盗墓啊叫做盗墓。为什么叫做盗墓呢？很明显吗？我是不是打开门胎啊， 是吧，那很明显是不是啊？啊，就不说了，对不对？大家可以理解成缩写啊， 那我们怎么去往这个啊，里边渲染这个弹幕呢，对吧？我们是不是还是利用防循环啊？ 那放心，花展示我们不讲理的啊，我们讲一下啊，还是利用望来声明变量对不对？声明变量的时候为了大家好理解，对吧？我用什么呢？我昨天用了 i， 是不是当然也可以用 x， 对吧？那我们今天就用 x 啊，你别有大家理解，比如说奢 x 对不对？好，比如说奢 x， 哎，我看下电量啊，应该够啊。 呃，生产 x， 然后这边当然今天没有什么数组，对吧？比如说我就加五，我就小于五就可以了。那小于五相当于我们添加几个 div 呢？ 是不是我们从零开始的那零一二二三四对吧？小于五那五肯定不是，那我们看几个？一个，两个，三个，四个，五个，对不对？那相当于添加了多少添加五个啊，待会添加五会添加五个这个点位，对吧？ 那好，那大家跟着我做啊，我在上面啊，再做一个变量对不对？再做一个什么变量啊？比方说我再做一个这个 啊，主要是我的那个克拉斯待会是萨嘛，我就起个萨啊，我就和他起的一样啊，这个萨和那个萨等于，大家不要纠结说哎呀，你这个等于是有关系吗？不是的，知道吧，这个变量的名字是不是大家随便起啊，对不对？我是为了好听嘛，这个的子类啊，我就起个萨嘛，对不对？ 然后这里面有一个概念，大家这里面有个概念对吧？呃哎，这个是自己敲出来的啊，我也不知道是啥。这里面有个概念，比方说我跟这个萨，当时我啊给一个空，对不对？给一个空，那我萨啊，我萨 加等于加等于相当于什么？相当于是不是？我昨天啊，我讲过了，丧等于丧 加上一个东西啊？啊？那他现在是空的，对吧？那我们说了这个是空，这个是空，这是个变量等于号，左边的变量是不是等待等于号啊？右边的东西给这边复职呢，对不对？那我现在是空 相当于是什么？相当于是空加一个什么？任何数是不是相当于就是我零加一个任何数？比如说我零加一等于多少，是不是一啊？我零加五等于多少，是不是五啊？零加任何数还等于任何数，对吧？那你现在这空加，比如说我第一次加一， 那萨第一次等于多少？肯定是一嘛？为什么呢？第一次它是空啊，空加一等于多少？是不是一？一付给变量了？当下的萨是不是一啊？对吧？那当第二次执行的时候萨是不是已经等于一了？一加一等于多少？二？ 那二富给这边这个变量萨都有加二，是不是第二次萨就变成二了，对不对？还是那句话，这边能听懂了听，听不懂了，哪怕你 听个百分之五啊，或者说理解个百分之十，或者理解个百分之二十都算啊，都算对吧？大家可以自己去敲代码啊，就自己去敲代码。是这样啊，就是大家听的时候啊， 你能听懂了最好，听不懂的自己去敲自己去利用。这个坑斯拉格知道吧？坑斯拉格点拉格知道吧？去打印一下他 对吧？你不要说，哎，我听不懂，现在我们这个啊，社会上有很多技能啊，就不是说你听一遍听两遍就能听懂的，只是说 听一遍听两遍，你脑脑海中啊，脑海中有个印象啊，有个印象，有个印象以后怎么办呢？有个印象以后我们自己去实践啊，实践出真知嘛，对不对？大家不要觉得哎呀，你就要讲的我听不懂啊，听不懂就听不懂，你自己敲一下嘛。 啊，你问问自己敲没敲对不对？练习没有练习对吧？啊，那这个我就删了对吧？这个我就删了。那发加等于啊，等于什么呢啊， 我这边说了啊，其实也不复杂。等于什么呢？我平时怎么写 div 的？这个上面怎么写，底下就这么写，对吧。 那是不是还要给他起一个克拉斯名字呢，对不对？是不是还要起克拉斯克拉斯名字？我刚才说了 要起个什么名字，是不是要起个萨呀，对不对？那好，我在这边加一个什么，是不是再加一个 div 啊？ 那很明显，大家看如果我不加单引号的话，是不是他就报错了吗？这就是个标签，这是个字幅串，知道吧？ 为什么说可以这样写呢？因为他是不变的吗？不变的，当然我可以拿引号把它引起来吗？对不对？大家看这个 div， 这个开标签是这样的，对吧？ b 标签是这样的吗？但是死的吗？对不对啊？那这里我就写一个萨，对吧？ 那大家看，那大家这边啊，那我第一次比方说啊，我这个 中间的内容，就比方说我待会如果我把这个 div 对不对写在这里面，我中间的内容是什么， 对不对？我是不是也在这里边往上加他呀？我是不是，那怎么加呢？大家看一下啊，我这加一个啊，加一个变量，什么变量呢？比方说我就加个叉， 对吧？我在这边再加一下啊，我为了好干中间给他啊，把这个叉显示出来，对吧？加了个叉，那每次中间这个叉是不是就是当前当前那个放循环里面插的值啊，对不对？ 那比方说啊，我第一次，我第一次，大家看一下啊，比方说我这个加号去掉，对不对？ 那你循环啊，第一次，第二次，第三次，对不对？我答应一下啊，坑死哪个点哪个啊？然后答应一下撒， 对不对？然后我们去浏览器上看一下， 好，我们打印一下，看一下，好看是不是出来了，大家看一下啊，大家看一下我们的打印的 这个方式啊，我把加号去了，是吧？萨，等他，那么我看我们打印一下萨，是不是 哦，我这俩在一起呢啊，看一下第一次打印的是不是零啊，看到吗？把这个打印出来了，是吧？ 第二次打印的是不是一啊？第三次打印的是不是二呀？看这个二，这里面我指的是这个啊，第三次打印的是不是三， 第四次是不是四啊？这是第五次了啊，因为我们是等于零，但小于五的，对不对？相当于是零，一二 二三四吗？对不对？那有聪明的同学说了，哎呀，你这都打印出来了啊，如果能把你这几个都拼接起来，对不对？然后我全部怎么样呢？我全部放在这个地方，那不就完美了吗？对不对？那不就完美了吗？哦，看一下我的电量啊啊，还能行， 完了怎么拼接呢？我是不是这样想，我加号，那加号等于什么呢？加号我再讲一遍，等于上加上他， 这样也可以啊，为什么呢？这样相当于我第一次，我这个是不是空的？空的我把它加上一个空，我是不是还是他呀？ 相当于零加热或者等于零，然后第一次把这段自负串给他了，对不对？那第一次变量由空就变成了他了，知道吧？那第二次过来撒， 那第二次过来的萨是不是本来就是他呀？那再加上一个他是不是第二次？这付给他的时候，第二次过来相当于是萨里面是不是有两个他了， 对不对？那第第三次过来的时候，萨里面是不是本来就有两个他呢？再加上一个他，那萨是不是里面相当于是有三个这样的结构的，是不是？那以此类推，是第四第五了啊，就会有五个里面，对不对？然后每次第一次他是零吗？ 什么零？第二次是一吗？是不是这家家里第二次是一，对不对？好，那我把这个啊， 我放在这里边。好，那大家看一下啊，大家看一下。那这时候我们把放循环做完，我们在外面打印一下三，对不对？我们看一下三等于什么，对吧？就是说在放循环，这个放循环执行完毕以后啊， 右行，右行上零一二三四，右行右行上五次以后，我们在外面看一下他的三是什么啊？我们在这边看一下， 大家看他已经打印出来了，对吧？看到没有？是不是拼接上了？看到没有，这是第一个，两个、三个，四个，对不对？零一二三四啊？五个，是不是？看是不是咋拼接起来了， 对吧？那拼接起来了，那现在要做什么是吧？这个答应我展示留着啊，他给他爱你们，他掰一地，掰哪个 id 呢？掰哪个 id 呢啊？掰哪个 id 呢？是不是我们掰一下这个，我们获取这个 boss 啊？ 啊，当然，我要写在单引号里面，对吧？当我获取到这个富力 box 的时候啊，我让他这个这个赢了，还是填满了，是不是？ 是不是等于一个三呀？啊？那这样的话，我们是不是相当于我们在浏览器里面再看一下，是不是就把它铺置进去了，看到没有？ 零一二三四，对吧？是不是就有了？那我们看一下这个 box， 看是不是啊？把这个就破了进去了，对吧？一个，两个，三个，四个，五个。那好，今天的课程就讲到这里啊， 这个其实对车型来说还是比较啊，比较难以理解，尤其是这款啊，这款，所以说大家好好理解一下啊，听不懂没有关系，听不懂没有关系啊，就当扩展。

大家好，今天给大家看一个非常好玩的效果啊，按按钮啊，鼠标划过他的边框会动， 真神奇，他是怎么实现呢？一会咱们一步一步的给大家实现一下啊，看鼠标划过会动，挺好，很不错。然后咱现在就实现一下吧，实现一下，我这边按钮的基本布局已经铺好了，然后它主要就是一个按钮的元素， div， 把 sport 来巴特，还有那个里面有一个笔放，这个笔放咱们先不用了，今天咱们只是把这个效果的原理给大家讲一下。实现了，实现一下， 然后咱们现在看切入到咱们自己的那个工作台。好嘞，这是咱们的按钮啊，然后咱咱们有一些基 土的样式，这个有些缓存啊，把这个缓存清掉，因为咱们采用的是原声的写法吗？原声的写法，呃，比较费劲， 因为我这电脑没有什么，没装，所以说咱就用原声的写法去写吧。啊，这个东西也是比较简单的，是那个纯 sss 的。首先咱们定这个按钮，这个按钮的宽高肯定得有吧，对吧？他得有定位 好，哎，这是解按钮的基本属性，宽一百六十下， 高又是八十像素，八十像素，然后一个 fancid 是二十四吧，完事 color 是白的，然后加个边框 boulder， boulder 一撇动一下啊，哎哎，咱们加粗一点边框吧，看着更加明显。二啊， 好了，这回按钮出来了，按钮比较难看，咱们缩小点，然后那个加个圆角 other ideas 等于五像素，列高 列高等于六十像素吧，因为我也不是美工出身，就随便给做一下啊。 好，这回咱按钮的模型出来了，嗯，字给拘留一下。 that's a leg center。 剧中之后它的按钮因为因为里边的边框动态效果涉及到定位，接下来就到原理环节了，首先给它定个位， who season reli relative index 一 past a leg center。 这按钮基本上就像那么回事了，鼠标滑过变小手嘛按钮对吧，这一点原理咱得懂。好了， 接下来我们就开始定义这个扫光效果了。扫光效果怎么做呢？其实很简单，我们给他定个 up， 用 up 的尾位去操作， 看一下啊。 after 人给定位 procession absolute。 嗯，宽高我们尽量给它定大点，宽度二百分之二百，高度也是百分之二百，我们给定大嘛。 left 百分之五十 top 百分之五十， 百分之五十。咱们先用个红色吧， pad 是红色， 背景颜色是红的， background 红色。好了，我们看一下效果。 嗯？怎么没有出来？为什么没有出来？希望大家给讲解一下哦，找到原因了，这也是一个坑啊，因为 up 里边没有内容，咱加点内容 content 等于好了，这回再看看出来没有。哎，出来了，出来之后我们要让这个， 其实这个就需要转起来了。嗯，先写个动画，先让他动起来，这个二百有点大，咱们一百，一百，有点小，就二百吧，先给他动起来。来 at k frames。 写个动画叫 note 吧，直接图，直接给它布到 旋转角度 vents from rot， 然后是三百六十度，六十度，直接到三，直接到三百六十度，然后我们再给它进行一个 加入动画，按 meter， 按按 meter amate 的第一个参数是动画名称，第二个参数是执行时间，第三个参数是动画效果，我们用流线效果，第四个参数是无这循环效果，我们用 invite 无限循环，然后再看一下效果。这回， 嗯，这回他已经转起来了，转起来，但是他的中心点有点怪，我们应该把中心点给定一下，对吧？好，定中心 trans tradition 这个中心点的这个 transprint from origan 零零，这回我们把中心点定在左上角，看效果啊， 好，这回他已经转起来了，转起来之后这个扫边的效果还是没有的啊。然后接下来我们就是在按钮里边再加一个元素，让他把这个红块给盖起来， 这个我们先放到按钮的后边吧， index 给它来个从底等于负二这个，然后我们再写一个块，再写一块，再写一个块，还是尾例 比方，这这个就用到比方了，比方一， 然后我们还是给他来个定位宽高 upset， 我们想定他的扫光的边框是多宽呢？我们就直接直接给他定，比原来的元素要小就行了。这这时候我们会加入一个计算放安度，这儿 stick 宽度是百分之百减去，我们先给它单词定个 up， 边框是二像素，高度也是一样的，百分之百减去二像素，然后我们在下 向左偏移 left 偏移两下数， up 偏移两下数， 再给它一个颜色 icon 零，这是零嘛？然后再层级比旋转的 d， i v 要高一级，仅代词等于负二，负一负一。 好了，这回我们再看一下效果啊，哎，现在我们看到按钮已经 这个旋转块已经在文字里底下了，然后我们再定那个， 我们查下，查下元素，检查一下，看下元素的效果 好了。 before 一 after before 对不对啊？这个颜色我们定给其他颜色吧，比方是二， 这个你定位好了， 我们看看笔画啊，笔画得宽和高， 高度没出来，宽度出来了，我们看看宽高 啊，这个，这个 c s s 的计算一定注意一下啊，加减乘除符号后边都需要加个空格，好了再看，哎，现在已经出来了， 减二，我们边框是二像素，那么我们就得减四好了， 最终，然后我们再定一个颜色， background leer， 咱再看下效果啊，看，这回是有有点那么个意思了， 这个层级好像是不对哦，你 动画，动画在后边，然后蒙层在前边，这样这个字一改变一下成绩再回， 哎，然后我们再把按钮的加个抛出，隐藏 o plus 版本。好嘞， 这回我们看到这个边框在移动，然后我们再把按钮原来的边框给去掉，咱们看看 好了，这回就是移动边框的按钮，然后我们现在要做的就是鼠标划过移动，鼠标移开，他不移动，这个时候我们还是 通过尾肋去做，然后在默认状态下，我们给一个透明度，对， ok， 省零点三，动画我们留作备用，然后我们再加入尾肋， 加入 v 类， v 类就当它鼠标滑过的时候，阿福特执行动画， 并且给它透明度变成一，接下来我们再看看效果啊， 好鼠，鼠标划过，哎，现在这个 曲线边框已经出来了，并且有动态效果，但是呢，大家有没有发现一个问题，它这个过渡比较生硬，我们把过渡变得柔柔和一些，这个时候我们就利用 c s s 它真实的属性 过度， 本次 a 省 out 了，先全部一秒一秒的拨动，然后我们再看一下效果， 看这这回就比较柔和了，鼠标防护他会有一个过渡效果。二一加一， 一个 fox 也加入，过度 不要划过，它会走啊。另一半边框呢就交给大家了，我这边就是给大家讲一下原理，然后咱们细节调整一下，把它这个边框变成白色， 好，咱们看一下，是吧？这回已经 colo 了，好了，今天就讲到这，谢谢大家。

哈喽，大家好，我是凯伟，欢迎大家来到我的频道，马上就快要过年了，提前和大家分享三款非常酷炫的动态烟花，这些烟花是利用 html 加 js 编写的， 一键点击就可以在电脑、手机或者是电视上燃放，非常适合那些不能燃放烟花的地区。我们先来看第一款，此款烟花带倒计时和祝福语搭配上音乐，过年的氛围感就有了， 烟花的效果也是非常的逼真，要是在大屏幕上廊放会有不同的视觉效果。除了用来跨年场景，还能用来送祝福，求婚等等场合，我们只需要简简单单的修改祝福 就行了。考虑到新手小白不知道怎么修改，这里我就给大家演示一下言代码，我会分享给大家。打开烟花的野马，找到 js 文件，也就是这一个右键点击，然后用记事本打开， 找到这一段话，把文字替换成你想要的祝福语，字数尽量和原来保持一样，不然容易变形。还有这里的间隔心形符号不能去掉啊，这里我来给大家演示一下，比如说这里改成生日快乐， 我们在一起，把好修改完以后记得保存， 然后我们点击打开它，好，稍微等会好，现在效果就出来了，变成了生日快乐我们在一起吧， 是不是非常的简单，怎么样，不错吧，可以用的场合有很多，大家自己发挥吧。 接下来我们来看第二款，这是一款模拟真实的点燃效果，鼠标点击一下就会自动燃放，带有真实燃放的音效和背景音乐， 由于平台原因，这里声音我就关闭掉了。暗黑的背景和天空飘下的雪花，有种让人身临其境的感觉。左上角还 还有祝福语，我们也可以进行修改，修改的方法和第一款有点区别，这款是在 html 里修改啊，右键点击，然后同样的以记事本的方式打开，在这里你可以修改他的标题名称， 然后在这里可以修改它的相关背景啊。这个 m p 三就是背景音乐也可以进行修改 啊，往下拉，在这里还可以控制烟花延时时间。同样的你也可以把祝福语给大家取消掉 啊，把这两个小斜杠给他删掉即可。这里就是左上角的祝福语，你可以把它改成你自己想要的祝福语啊，这里我就不再修改了。 第三款是第二款的升级版，使用了极光的天空作为背景，还添加了前置的动态祝福仪，效果明显更好了，我个人是比较喜欢这种背景，有种太空抗烟花的意境。 修改方法也是非常简单的，用记事本打开 html 啊，找到相关的文字，换成自己想要的祝福语就行了，相信大家也能灵活应用。 本视频所应用到的年代码我会放到视频的下方，简介，大家可以自行获取， 有条件的朋友可以把网页放到服务器上绑定艺名，这样就更加 家方便使用。好了，那么今天的视频就分享到这里，在此提前祝大家新年快乐，万事如意，心想事成！好，拜拜！