css 框架彩色闪动边框怎么做?

芒果网小编 软件教程

css 框架彩色闪动边框怎么做?

最近有很多小伙伴,在问我这个 “技术乐园” 的闪动彩色框架是怎么做的?

是不是JS来实现的,当然啦实际上不需要JS直接CSS就可以实现了!

那么怎么操作呢?请看下面教程:

首先在你网站的主要CSS(最好是全局加载的CSS)里面添加以下代码:

@keyframes glow {      50% {
	box-shadow: 0 0 5px #FF5722;      }      10% {
	box-shadow: 0 0 5px #e022d2;      }      20% {
	box-shadow: 0 0 5px #E91E63;      }      40% {
	box-shadow: 0 0 5px #fbff07;      }      60% {
	box-shadow: 0 0 5px #03f5d0;      }      80% {
	box-shadow: 0 0 5px #FF5533;      }  }
}

然后找到相应的CSS框架,就拿技术乐园来举例!

QQ截图20181008234723

审查元素,可以完全看到这这个框架的起始CSS(.indexWebList1)那么,在右侧我们能够明显看到 .indexWebList1 

里面包含的代码,我们找到这个CSS 添加以下代码(实例图已经添加了):

animation: glow 1000ms ease-out infinite alternate;

1000MS表示闪动频次,自己设置就好了越小越快!建议1000MS。


关于你说你不知道是哪一个.CSS文件那么你审查完元素往右边看!

同样以技术乐园为例,如图所示就是你这个框架的css文件和所在哪一行!

编辑最好用相关开发软件去操作,记事本一般人玩不转!


推荐使用:notepad++


演示站点:http://www.jishuly.com


QQ截图20181008235148


以上内容来源于“QQ领地网”提供,转载请注明出处!https://www.qqlingdi.com/article/553.html


下载地址

相关文章
评论留言