一些css/css3特效以及边框流光特效实现

就是做一个一条线在周围转啊转的效果
我的效果: 大概思路是四条线,在周围一直走。

写在前面

兄弟们,别光收藏,点个赞啊,beiwei(csdn居然认为这个词语是敏感词)求赞

一些css/css3特效以及边框流光特效实现_第1张图片

如果你想要的更多边框特效,这里还有
有趣的CSS | css-border特效(转动边框,彩虹边框,渐变边框)和css变量⇲

参考:传送门⇲
一些css/css3特效以及边框流光特效实现_第2张图片
上面的效果大家f12就知道怎么做了

写在后面

另外还有下面这种效果。传送门⇲
一些css/css3特效以及边框流光特效实现_第3张图片

另外鼠标划入特效。传送门

  • 在线预览
  • 源码下载
    一些css/css3特效以及边框流光特效实现_第4张图片
    当然还有一些 花里花哨的效果,可做学习css3用(审查元素查看css样式文件,都是比较基础的东西)
    一些css/css3特效以及边框流光特效实现_第5张图片

以上特效,大家f12均可查看实现方式,甚至有的可以下载源码。
下面我把我做的边框流光特效实现贴出来,以便日后 ctrl CV

<li v-for="(item,index) in indoorParams" :key="index">
  //其他代码。。。
  <div class="animate-border">
    <i></i>
    <i></i>
  </div>
</li>

以上。

你可能感兴趣的:(css/css3)