该页面有HTML代码，进入原文查看更佳：http://www.evillcg.com/blog/item/1466997377/
在去年的时候，学习前端开发的过程中遇到了一个名为currentColor的变量。 它可以用在所有需要填写颜色参数的地方，它的值代表的是当前标签对应的实时的color值。 其实刚遇到它的时候我是懵逼的
。不过在慢慢的进步中渐渐的喜欢上了这个变量。 这次我们就来说说关于它的故事。
使用currentColor作组件主题色
今天我们制作一个组件样式，然后使用currentColor来让它主题色可变动。 我们的组件的样式颜色比较单一，使用一个主题色和黑白灰进行组合。
组件基本样式
我们首先做一个基本的组件样式，其HTML结构如下:
<div class="com">
<a>这里是标题</a>
<p>这里是内容啊，那么我就写多点啦，要不然怎么知道这里是内容呢？所以就水点内容吧</p>
</div>
基本样式如下:
.com{
display: inline-block;
position:relative;
width:310px;
height:180px;
text-align: left;
box-sizing:border-box;
padding:15px;
margin:10px;
vertical-align: top;
z-index:0;
}
.com>a{
font-weight: bold;
font-size:20px;
cursor: pointer;
transition:color 0.3s;
}
.com>p{
color:#666;
text-indent: 2em;
padding:0px 15px;
}
这里是内容啊，那么我就写多点啦，要不然怎么知道这里是内容呢？所以就水点内容吧
上面我们创建了一个容器div，容器内部有一个标题a和详情p。我们进行一些基本的布局和样式处理， 然后设置容器的position为relative相对定位，这样它可以作为定位上的容器。 设置z-index参与到层级计算当中，这样子元素的层级计算作用域就停留在这个容器中。
我们接下来加点其他的修饰品。
.com:before,.com:after{
content:"";
display: inline-block;
position: absolute;
width:60px;
height:60px;
background-color:currentColor;
z-index:-2;
left:-3px;
top:-3px;
transition:left 0.3s,top 0.3s,opacity 0.3s;
}
.com:after{
left:auto;
top:auto;
right:-3px;
bottom:-3px;
transition:right 0.3s,bottom 0.3s,opacity 0.3s;
}
.com>a:before{
content: "";
display: inline-block;
width:80%;
position: absolute;
left:10%;
bottom:20px;
height:1px;
background-color:currentColor;
}
.com>a:after{
content:"";
display: inline-block;
width:100%;
height: 100%;
position:absolute;
background-color:#fff;
left:0px;
top:0px;
z-index:-1;
border:1px solid rgba(0,0,0,0.15);
box-sizing:border-box;
}
这里是内容啊，那么我就写多点啦，要不然怎么知道这里是内容呢？所以就水点内容吧
这里我们使用了div的before和after伪元素来构建两个方块。 before和after伪元素是CSS绘图工作中常用的部分。 伪元素必须要设置content属性后才可以让其他样式生效，因为我们这里不需要文字，所以设置为空字符串。 position设置为absolute绝对布局，然后通过lefttoprightbottom 把两个方块分别定位到左上角和右下角，最后使用currountColor作为背景色。
标题a也使用了两个伪元素，其中一个使用绝对布局作为背景。为什么不直接给div添加背景呢？ 因为我们把div作为层级计算的容器，哪怕它的内容的z-index的值是负无穷也会在它之后绘制， 显示在它之上。所以我们要使用一个子节点来作为背景。另一个伪元素绘制一条细线在容器下方用于装饰， 颜色也是使用currentColor。
加入一点交互魔法
仅仅是静态的布局显得有些单调了，而且这样简单的效果我们使用背景图片也可以做得出来。 我们使用超方便的交互伪类hover和超简单过渡属性transition给它施加一点小小的魔法。
.com:hover:before{
left:-7px;
top:-7px;
}
.com:hover:after{
right:-7px;
bottom:-7px;
}
这里是内容啊，那么我就写多点啦，要不然怎么知道这里是内容呢？所以就水点内容吧
我们加入一个div的hover效果，目标是div的两个伪元素， 让它们向外扩张。使得用户在鼠标进入容器后将容器强调出来。 过渡的效果来源于之前就写在伪元素中的transition属性。
.com>a:hover{
color:#666;
}
这里是内容啊，那么我就写多点啦，要不然怎么知道这里是内容呢？所以就水点内容吧
给标题a加入一些交互效果，让用户感受到标题的可点击情况。
主角currentColor
现在用户交互部分也完成了，我们已经完成一个组件的样式设计了，在主题色的部分我们都使用了currentColor。 现在大家除了看到它是黑色好像没有感觉到其他的什么。那我们现在开始来改变一下主题色。
<div class="com" style="color:#de5347;">
<a>这里是标题</a>
<p>这里是内容啊，那么我就写多点啦，要不然怎么知道这里是内容呢？所以就水点内容吧</p>
</div>
<div class="com" style="color:#ffce41;">
<a>这里是标题</a>
<p>这里是内容啊，那么我就写多点啦，要不然怎么知道这里是内容呢？所以就水点内容吧</p>
</div>
<div class="com" style="color:#4b8cf5;">
<a>这里是标题</a>
<p>这里是内容啊，那么我就写多点啦，要不然怎么知道这里是内容呢？所以就水点内容吧</p>
</div>
<div class="com" style="color:#1aa260;">
<a>这里是标题</a>
<p>这里是内容啊，那么我就写多点啦，要不然怎么知道这里是内容呢？所以就水点内容吧</p>
</div>
这里是内容啊，那么我就写多点啦，要不然怎么知道这里是内容呢？所以就水点内容吧
这里是内容啊，那么我就写多点啦，要不然怎么知道这里是内容呢？所以就水点内容吧
这里是内容啊，那么我就写多点啦，要不然怎么知道这里是内容呢？所以就水点内容吧
这里是内容啊，那么我就写多点啦，要不然怎么知道这里是内容呢？所以就水点内容吧
我们给每一个容器div设置不同的color值。就可以发现所有使用currentColor的地方都变成了设置的color值。 不过值得注意的一点是，在鼠标放置在标题的状态下，不仅仅标题的颜色改变了，标题下方的横线颜色也改变了。 这是因为横线是标题的伪元素，属于标题的子元素。子元素的color继承自父元素，currentColor又来源于color， 所以横线的颜色也是会变化的。并且这个变化是实时的，所以就算横线没有使用transition过渡也会有过渡效果。
当前成果
我们上面所有的内容几乎全部使用CSS完成的，把它用在项目里的话之后我们只需要放入html标签和设置class属性就行了。
各种姿势的发掘
遇到一个不熟悉的属性，我们当然不能这么容易的放过它，不把属性玩坏的前端工程师不是好绅士
。
加入animation闪瞎狗眼
@keyframes sxgy{
0%{color:#de5347}
25%{color:#ffce41}
50%{color:#4b8cf5}
75%{color:#1aa260}
100%{color:#de5347}
}
@-webkit-keyframes sxgy{
0%{color:#de5347}
25%{color:#ffce41}
50%{color:#4b8cf5}
75%{color:#1aa260}
100%{color:#de5347}
}
.sxgy{
animation:sxgy 1s;
animation-iteration-count:infinite;
-webkit-animation:sxgy 1s;
-webkit-animation-iteration-count:infinite;
}
.sxgy>a{
transition:none;
}
<div class="com sxgy">
<a>这里是标题</a>
<p>这里是内容啊，那么我就写多点啦，要不然怎么知道这里是内容呢？所以就水点内容吧</p>
</div>
这里是内容啊，那么我就写多点啦，要不然怎么知道这里是内容呢？所以就水点内容吧
我们给组件加入一个颜色的CSS动画，并且去掉标题a的transition属性使其颜色实时跟随容器。
JS控制颜色
我们动态改变控件的颜色只需要改变一下color属性，简简单单就可以完成。
<div class="com" style="color:#de5044;">
<a>最后我们来配色吧</a>
<p>内容啦</p>
<input style="margin-left:48px;" value="#de5044" type="color"
onchange="this.parentNode.style['color'] = this.value;"/>
</div>
内容啦
我们可以把这种方法运用到全局主题去，不需要每个主题作一套CSS，只需要每个主题选择一个颜色即可。
整体伪类变色
.acls{
color:#34a0ff;
}
.acls:hover{
color:#7bd439;
}
.acls:active{
color:#de5044;
}
<div class="com acls">
<a>这里是标题</a>
<p>这里是内容啊，那么我就写多点啦，要不然怎么知道这里是内容呢？所以就水点内容吧</p>
</div>
这里是内容啊，那么我就写多点啦，要不然怎么知道这里是内容呢？所以就水点内容吧
这里我们使用伪类给容器的默认状态、鼠标悬浮状态和鼠标按下状态设置了3个颜色。
在渐变中使用
.gr:before{
background: linear-gradient(-45deg,rgba(255,255,255,0), currentColor);
}
.gr:after{
background: linear-gradient(135deg,rgba(255,255,255,0), currentColor);
}
<div class="com gr" style="color:#dd5044;">
<a>这里是标题</a>
<p>这里是内容啊，那么我就写多点啦，要不然怎么知道这里是内容呢？所以就水点内容吧</p>
</div>
<div class="com gr" style="color:#18ae5e;">
<a>这里是标题</a>
<p>这里是内容啊，那么我就写多点啦，要不然怎么知道这里是内容呢？所以就水点内容吧</p>
</div>
这里是内容啊，那么我就写多点啦，要不然怎么知道这里是内容呢？所以就水点内容吧
这里是内容啊，那么我就写多点啦，要不然怎么知道这里是内容呢？所以就水点内容吧
上面我们在渐变属性中使用了currentColor，让方块的背景由color渐变到白色透明。
结束语
CSS的属性多的数不清，很多有趣的东西在等待着我们发掘。到了最后其实同样的效果可以用不同的方法解决， 等对样式熟悉之后技术就已经没有设计的想法以及美感重要了，所以，有什么想法就尽管去折腾啦， 往往在折腾中可以发现很多意想不到的惊喜。
扫一扫
1953
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
