前端开发

css3 放大缩小循环动画代码片段

2019-05-07377次阅读css模块
css3 放大缩小循环动画代码片段,在这里再次推荐一下跨浏览器的CSS动画库animate.css。
前端开发

CSS3图像动画并显示图像后面的文本

2019-04-29405次阅读css模块
通过CSS3实现图像动画并显示图像后面的文本,通过这个例子来练习扩展你的CSS知识,并开动脑筋创建你自己独特的动画。
前端开发

被遗忘了的css伪类:empty

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

position:sticky粘性定位

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

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

2019-04-17495次阅读css模块
先了解一下选择器为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。
前端开发

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

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

多行文本显示省略号

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

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

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

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

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

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

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