• 当前标签:CSS

程序开发 一段css让全站变灰

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世通报的深切哀悼,国务院发布公告,决定2020年4月4日举行全国性哀悼活动。在此期间,全国和驻外使馆下半旗致哀,全国停止公共娱乐活动,4月4日10点开始,全国人民默哀3分钟,汽车、火车、舰船鸣笛,防空警报鸣响。 想到以往默哀日访问网站时发现整站会变成全灰,即想到如果立即开始开发、设计图修改等工作也会消耗大量的时间与精力,那会不会有css可以直接处理所有的元素将他们变灰,随即想到了css3的filter(滤镜),并也证实了这一想法的可行性。 解决方案1 html { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1); } 解决方案2 非全站变灰我们可以将需要使用filter的元素单独加上 <html> <body> <div class="gray-filter"></div> </body> </html> <style> .fixed { position: fixed; top: 100px; left: 100px; height: 100px; width: 100px; background-color: #f00; } .gray-filter { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1); } </style> 兼容IE的办法 很多小伙伴评论说IE低版本不支持该怎么办于是我Google搜索了一下是有实现办法的 实现办法是引入grayscale.js,Demo下载 grayscale.js Demo 简单查看了该js的源码后发现会将color、background-color、borderColor等属性提取出来后替换成灰色,background-image和图片会使用canvas绘制处理成灰色再替换成处理后的图片源 demo内functions.js则是对判断浏览器userAgent来识别浏览器类型与版本,做出对应的处理 参考资料与demo来源 小程序下的问题 微信小程序我尝试加在page上但是fixed还是失效了,只能使用第二种方法去加样式,大家如果有解决方案可以评论提出来大家一起讨论一下~ 作者:tiutiu链接:https://juejin.im/post/5e86e221e51d4546ce27b99c来源:掘金著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

2020-04-04 14:59:40 286 0 1
阅读详情

程序开发 纯css制作导航下划线

不可思议的纯CSS导航栏下划线跟随效果 先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。 OK,继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ,我的第一反应也是,感觉很麻烦啊。所以我一直在想,有没有可能只使用 CSS 完成这个效果呢? <ul>   <li>不可思议的CSS</li>   <li>导航栏</li>   <li>光标下划线跟随</li>   <li>PURE CSS</li>   <li>Coco</li> </ul> CSS ul {     display: flex;     position: absolute;     width: 800px;     top: 50%;     left: 50%;     transform: translate(-50%, -50%); } li {     position: relative;     padding: 20px;     font-size: 24px;     color: #000;     line-height: 1;     transition: 0.2s all linear;     cursor: pointer; } li::before {     content: "";     position: absolute;     top: 0;     left: 100%;     width: 0;     height: 100%;     border-bottom: 2px solid #000;     transition: 0.2s all linear; } li:hover::before {     width: 100%;     top: 0;     left: 0;     transition-delay: 0.1s;     border-bottom-color: #000; } li:hover ~ li::before {     left: 0; } li:active {     background: #000;     color: #fff; }

2018-03-27 22:55:29 384 2 0
阅读详情

程序开发 CSS 的优先级机制

样式的优先级 多重样式(Multiple Styles):如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。 一般情况下,优先级如下: 外部样式 <内部样式 <内联样式 有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。 示例如下: <head>     <style type="text/css">       /* 内部样式 */       h3{color:green;}     </style>     <!-- 外部样式 style.css -->     <link rel="stylesheet" type="text/css" href="style.css"/>     <!-- 设置:h3{color:blue;} --> </head> <body>     <h3>测试!</h3> </body> 选择器的优先权 解释: 1.  内联样式表的权值最高 1000; 2.  ID 选择器的权值为 100 3.  Class 类选择器的权值为 10 4.  HTML 标签选择器的权值为 1   利用选择器的权值进行计算比较,示例如下: <html>   <head>     <style type="text/css">         #redP p {              /* 权值 = 100+1=101 */              color:#F00;  /* 红色 */         }         #redP .red em {              /* 权值 = 100+10+1=111 */              color:#00F; /* 蓝色 */         }         #redP p span em {              /* 权值 = 100+1+1+1=103 */              color:#FF0;/*黄色*/         }     </style>   </head>   <body>      <div id="redP">         <p class="red">red            <span><em>em red</em></span>         </p>         <p>red</p>      </div>   </body> </html> 结果:<em> 标签内的数据显示为蓝色 CSS 优先级法则 A  选择器都有一个权值,权值越大越优先; B  当权值相等时,后出现的样式表设置要优于先出现的样式表设置; C  创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式; D  继承的CSS 样式不如后来指定的CSS 样式; E  在同一组属性设置中标有“!important”规则的优先级最大。   IE浏览器是个特殊的家伙,不过现在用的人不多了吧!

2017-07-05 23:33:34 353 0 0
阅读详情

程序开发 Flex 布局教程

下面分享来自 阮一峰的网络日志 的一片很好的教程文章: 网页布局(layout)是CSS的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 Flex布局将成为未来布局的首选方案。本文介绍它的语法,下一篇文章给出常见布局的Flex写法。 以下内容主要参考了下面两篇文章:A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties。 一、Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用Flex布局。 .box{ display: inline-flex; } Webkit内核的浏览器,必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex; } 注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。 二、基本概念 采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。 三、容器的属性 以下6个属性设置在容器上。 flex-direction flex-wrap flex-flow justify-content align-items align-content 3.1 flex-direction属性 flex-direction属性决定主轴的方向(即项目的排列方向)。 .box { flex-direction: row | row-reverse | column | column-reverse; } 它可能有4个值。 row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。 column:主轴为垂直方向,起点在上沿。 column-reverse:主轴为垂直方向,起点在下沿。 3.2 flex-wrap属性 默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。 .box{ flex-wrap: nowrap | wrap | wrap-reverse; } 它可能取三个值。 (1)nowrap(默认):不换行。 (2)wrap:换行,第一行在上方。 (3)wrap-reverse:换行,第一行在下方。 3.3 flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。 .box { flex-flow: <flex-direction> || <flex-wrap>; } 3.4 justify-content属性 justify-content属性定义了项目在主轴上的对齐方式。 .box { justify-content: flex-start | flex-end | center | space-between | space-around; } 它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。 flex-start(默认值):左对齐 flex-end:右对齐 center: 居中 space-between:两端对齐,项目之间的间隔都相等。 space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。 3.5 align-items属性 align-items属性定义项目在交叉轴上如何对齐。 .box { align-items: flex-start | flex-end | center | baseline | stretch; } 它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。 flex-start:交叉轴的起点对齐。 flex-end:交叉轴的终点对齐。 center:交叉轴的中点对齐。 baseline:

2017-03-10 22:18:24 402 0 0
阅读详情
  • 1
前往