在网站中,我们可以通过css实现文字描边,模拟霓虹灯的效果,实现方法非常简单,只需要两行css就可以实现。实现效果如下图:
增加效果之前,可以参考追格官网首页:www.zhuige.com
实现方法如下,增加一个描边效果类,调整边框宽度,颜色,或者用rgba调整边框透明度,结合自己情况适配即可实现不错的效果
.out-headline {
color: transparent;
-webkit-text-stroke: 1px #66dfcc;
}
在需要应用的地方调用该类即可,例如:
原始
<h1 class="zhuige-animated">
调用
<h1 class="zhuige-animated out-headline">
-
css详解系列:10-Flex项目属性orderorder 属性 用来设置或检索弹性盒模型对象的项目(子元素)在容器中出现的順序。
-
css详解系列:11-Flex项目属性align-selfalign-self属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。
-
css实现点击切换图片效果的方法在css中我们可以使用伪类选择器来实现点击切换图片的效果,看看如何实现的。
-
css样式表的三种样式css(级联样式表)主要有三种样式定义方式
-
如何在css中实现样式优先级在css中,样式优先级是由一系列规则决定的,这些规则决定了当多个样式规则应用于同一个HTML元素时,哪个规则会优先生效。
-
css文本超出显示3个点的方法在css中,如果你想让超出特定长度的文本显示为三个点(...),你可以使用text-overflow属性,配合overflow和white-space属性。
暂无评论,抢个沙发...