关于纯JS实现动态边框的理解

时间:2024-03-06 09:24:25

 

 

先放效果图吧

 

 

 

不是我写出来的,也不是我找到的,我朋友找的这个东西,觉得炫酷,我研究了半天(2333)

 

开始正题:

页面有6个图形,5个矩形,1个圆形,5个圆形是同样的方法实现,圆形是别的方法

先说圆形,圆形通过C3动画属性就已经全部实现了

 这个圆形边框转起来靠的是C3动画属性,通过伪元素选择符:before构建一个额外的元素,在设置边框属性之后,通过动画实现构建出来的元素的不停旋转。
        看起来是个边框一直在转动,实际上是一个大的正方形在不停的运动,仔细观察的话可以发现滚动条的高度忽高忽低,就是正方形元素的斜对角线的长度造成的。可以参考下图

 

 注意滚动条高度,我的鼠标是没有专门去控制页面的。

 

接着看矩形

矩形实现的方式是通过chrome浏览器自带的animate方法实现的,为了证实这一点,我在不同的浏览器上都做了测试

1、edge(edge只有圆形,也就是纯粹通过c3动画实现的才可以正常运行)

 

 2、firefox(火狐浏览器也是运行不了,全是问题)

3、ie(ie11,不能运行)

 

 4、safari(是的,你没看错,safari浏览器,整个页面只有下面这个东西)

 

5、360(360可以运行,因为360是Trident和chromium双内核)

 

 6、搜狗(搜狗可以运行,搜狗内核是chromium)

7、欧朋(如果欧朋还是使用presto内核的话估计也是不可以,但在几年前欧朋放弃了自己的presto内核选择了谷歌的webkit,后来又和谷歌一起开发blink,也算是webkit的分支)

 

 这是关于animate属性的一些资料

 

 开始实现

 首先将每个矩形的特点都划分出来,组成一个数组对象,如果有需要更改的,则单独列出

 

 然后进行模板的构建

 

如果什么都不需要进行修改的话,就参照这个模板就行

设置边框

将存放特点的数组对象与模板进行合并加工,构造不同的样式

参考圆形,将新元素的属性构造出来

计算元素自身的大小以及在新元素构建后应该占据的大小

 

计算关键帧样式

计算第二条边框的关键帧样式

animate属性的配置

 

 

 构造元素,样式,并进行分配

 

利用chrome的animate属性,实现动画

 

对双边框样式进行动画实现

 

最后将页面上的元素进行遍历,给每一个div元素都添加动画边框效果

 

 //页面的作者和链接我不知道,我的是我朋友给我的,而且过了好久,这个是网页内部的注释,我标明一下出处(-.-)

 

相关文章