实现网站变灰

css实现网站变灰

1
2
3
4
5
6
7
8
9
10
html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-filter: gray;
    filter: gray;
    filter: progid:dximagetransform.microsoft.basicimage(grayscale=1) /*ie*/
}

触发display为none元素的动画效果

写模态框时，当模态框show的时候动画没有，原来是元素有display:none时添加样式里css3的变幻效果无法生效，解决的方法总结，测试代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
.modal{
  z-index: 100;
  height: 200px;
  width: 200px;
  background: yellow;
  transition: all 1s;
  display:none;
}
.modal.active{
  background: red;
  transform: translateX(100px);
}
1
2
<a href="javascript:" id="trigger" data-target="#model1">运行动画</a>
<div id="model1" class="modal"></div>

查看详情»

同时使用flex、white-space和overflow的bug

写这个博客文章列表标题时遇到的bug，当flex和white-space、overflow一起用的时候，发现overflow:hidden失效了。代码如下：

1
2
3
4
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

解决办法：再加上min-width: 0属性。

1
2
3
4
5
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width:0;

a标签伪类顺序

a标签的link、visited、hover、active通常的顺序为：

1
2
3
4
a:link {color: #000;} /* 未访问的链接 */
a:visited {color: #F00;} /* 已访问的链接 */
a:hover{color: #0F0;} /* 鼠标在链接上 */ 
a:active {color: #00F;}