前端开发

被遗忘了的css伪类:empty

2019-04-2224次阅读csscss3
:empty伪类代表没有子元素的元素。子元素只可以是元素节点或文本(包括空格),但不包括html注释。浏览器兼容:IE9+
前端开发

CSS3 滤镜(Filter)使用小结

2019-04-1930次阅读css3
CSS3滤镜(filter)与我们经常说的IE滤镜是两码事,IE滤镜是指老版本的(4.0 到9.0)Windows IE浏览器支持一种非标准的 "filter" ,目前已经被现代浏览器弃用。CSS3滤镜(filter)属性提供的图形特效,如灰度、透明度、模糊、阴影等。
前端开发

position:sticky粘性定位

2019-04-1750次阅读css3
在浏览网站时,通常会看到HTML元素(如横幅和导航)滚动到一定位置时就固定在浏览器的顶部。之前我们一直采用JavaScript滚动事件来监听滚动到一定位置时给此元素添加position: fixed固定定位。你是知道的固定定位是脱离文档流的哟,因此事先在HTML结构上,不要忘了给这个元素添加一个父元素写上高度占位,不然滚动到一定位置时就会出现页面抖动。如果不写高度占位,你可以尝试CSS Scroll Snap实现滚动捕捉及填充滚动容器空白区域文案。
前端开发

CSS3伪类选择器之 :nth-child()

2019-04-1733次阅读css3
先了解一下选择器为CSS3结构类的有哪些::first-child、:last-child、:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()、:first-of-type、:last-of-type、:only-child、:only-of-type、:empty。
前端开发

非标准CSS3属性-webkit-box-reflect制作倒影

2019-04-1759次阅读css3
在Web制作中,有些时候需要实现一些倒影的效果,可以使用非标准属性-webkit-box-reflect实现。
前端开发

animate.css一个跨浏览器的CSS动画库

2019-04-1643次阅读css3
animate.css一个跨浏览器的CSS动画库。简单易用。虽然已Star,但每次使用使用时都要在stars里查找。。。
前端开发

多行文本显示省略号

2019-04-0946次阅读css3css
display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;看前缀webkit就知道属于webkit内部属性,只支持webkit内核浏览器,移动端可以放心使用。
前端开发

css练习制作钢铁侠胸口的小型核反应堆

2019-04-0273次阅读csscss3
使用CSS3 Transforms变换和Animations动画练习制作钢铁侠胸口的小型核反应堆,个人觉得光看还是不行的,还是要多练,并对其中用到得不太熟悉的css属性进行温习补缺。
前端开发

16个常用css技巧收集整理(四)

2019-03-3083次阅读css3css
能用css解决的就不要用JavaScript。16个常用css技巧收集整理(一),16个常用css技巧收集整理(二),16个常用css技巧收集整理(三)都有介绍,本文继续其它收集的css技巧。
前端开发

16个常用css技巧收集整理(三)

2019-03-3065次阅读css3css
能用css解决的就不要用JavaScript。16个常用css技巧收集整理(一)中收集了animation-fill-mode、calc()计算值、box-sizing、currentColor,16个常用css技巧收集整理(二)中收集了caret-color、scroll-behavior、::selection、-webkit-overflow-scrolling: touch,本文继续其它收集的css技巧。