像滤镜一样改变字体颜色

栏目: CSS · 发布时间: 6年前

内容简介:标题是什么意思?可能一开始觉得怪怪的,字体颜色不就是一个css的样式就改变了吗?css样式是改变整个字体的颜色,但是怎么改变半个甚至先看看效果,预览网址

标题是什么意思?可能一开始觉得怪怪的,字体颜色不就是一个css的样式就改变了吗?

css样式是改变整个字体的颜色,但是怎么改变半个甚至 0.3333... 个字体的颜色呢?

先看看效果,预览网址

像滤镜一样改变字体颜色

CodePen地址: codepen.io/itagn/pen/a…

从零开始

html

<div class="box">
  <div class="down">东东么么哒</div>
  <div class="up">东东么么哒</div>
</div>
复制代码

css

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  font-size: 5em;
  width: 5em;
  height: 1.2em;
}
复制代码

这里涉及到两个div了,一个红豆色的div和一个浅蓝色的div,而且内容都是"东东么么哒"

而且它们需要完全重合,包括文字内容,字体大小,位置等等

这里就涉及到层级问题了

第一个关键属性 z-index: n    
复制代码
.up, .down {
  position: absolute;
  height: 100%;
  line-height: 1;
}
.up {
   z-index: 2; 
}
.down {
  z-index: 1;
}
复制代码

视觉分析来看

是滑动的的div设置了半透明,颜色结合的部分改变的颜色?
复制代码

不对,滑动的div颜色是浅灰色,底色是红豆色,是不能结合成浅蓝色的

不是颜色的结合,那么肯定是自定义的颜色,那就是说浅蓝色的文字本身就在滑动的div上面

如果div上面的字要显示成图里面这样,那么必然是通过切割出来的

第二个关键属性 overflow: hidden;   
复制代码

.up的div处理成滑块

.up {
  color: lightblue;
  z-index: 2;
  width: 1em;
  overflow: hidden;
  border-radius: 15%;
  background: #eee;
}
.down {
  color: indianred;
  z-index: 1;
}
复制代码

这个时候回想一下轮播图,是不是轮播图也实现了类似的效果,ok,继续往下

轮播图滚动的是图片序列,我们反过来理解,滚动“窗口”

那么我们通过animation来制作动画,通过改变left的值实现窗口的滚动

第三个关键属性 animation
复制代码
.up {
  animation: run 2.5s infinite;
  -webkit-animation: run 2.5s infinite;
}
@keyframes run {
  0% { left: -1em; }
  100% { left: 5em; }
}
@-webkit-keyframes run {
  0% { left: -1em; }
  100% { left: 5em; }
}
复制代码

然而我们发现一个div好像解决不了,因为窗口需要一个空白div,文字内容需要新的div

其实一个div可以解决,我们通过伪元素after或者伪元素before就能构造

第四个关键属性 ::before || ::after
复制代码

html结构变化,.up的div只做滑块

<div class="box">
  <div class="down">东东么么哒</div>
  <div class="up"></div>
</div>
复制代码

css变化

.up::before {
  content: "东东么么哒";
  position: absolute;
  width: 5em;
}
复制代码

可是窗口在滚动也会影响伪元素的位置!

既然这样,那么我们给伪元素也来和窗口运动刚刚相反的动画吧,这样相对浏览器不就是静止了吗...

.up::before {
  animation: run2 2.5s infinite;
  -webkit-animation: run2 2.5s infinite;
}
@keyframes run2 {
  0% { left: 1em; }
  100% { left: -5em; }
}
@-webkit-keyframes run2 {
  0% { left: 1em; }
  100% { left: -5em; }
}
复制代码

以上不需要用到JavaScript,材料准备完毕!

可维护的优化

CodePen地址:优化后的代码

列举需要优化的点:

  • 伪元素content的值与.down的div文字的DRY问题
  • 如何通过JavaScript调整展示的整体大小
  • css里面反复出现的相同的值,这样不够DRY
  • 滑块的运动轨迹一直有效处于文字的上面(即下次更换文字内容的时候,不需要更换滑动结束时候的left值)

我们发现,不能通过JavaScript来改变伪元素的content

如果能通过修改JavaScript变量就能改变div的文字和伪元素的文字,那就好了!

答案是可以的,css通过var()可以获取css变量,通过 --属性 可以设置css变量,那么我们把所有变量挂载到根属性 :root 上面,就可以获取了

而且浏览器里面可以发现

document.querySelector(':root') === document.documentElement // true
复制代码

说明这里就是html的根属性,接下来通过 document.documentElement.style.setProperty('--属性', 值) 既可以保证代码的可维护性,然后我们把css代码通过变量优化起来,全部导入到JavaScript的对象里,尽量做到DRY!


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Coding the Matrix

Coding the Matrix

Philip N. Klein / Newtonian Press / 2013-7-26 / $35.00

An engaging introduction to vectors and matrices and the algorithms that operate on them, intended for the student who knows how to program. Mathematical concepts and computational problems are motiva......一起来看看 《Coding the Matrix》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码