css
前端小黑
never give up never give in
展开
-
减少回流重绘的方法及相关的性能测试(performance)结果分析
回流必将引起重绘,而重绘不一定引起回流我们经常会看到上面这句话,那么回流和重绘是什么呢回流计算DOM节点在设备视口(viewport)内的确切位置和大小的过程,会在页面节点的几何属性或者布局发生变化时发生的发生回流的情况添加或删除可见的DOM元素元素的位置发生变化元素的尺寸发生变化(包括外边距、内边框、边框大小、高度和宽度等)内容发生变化,比如文本变化或图片被另一个不同尺寸的图片...原创 2020-03-05 17:32:57 · 826 阅读 · 0 评论 -
纯css实现各种箭头图片效果
我们经常会通过使用css来实现某些图片的来达到不使用真正意义上的图片的效果,今天就尝试着使用纯css来实现几个常见的箭头效果下面的css都是使用在span标签上的1.普通箭头向上箭头图片效果:代码:.normal_top_arrow { display: inline-block; width: 80px; height: 110px; box-sha...原创 2019-02-09 02:16:20 · 6454 阅读 · 0 评论 -
css flex布局常用容器属性总结
flex布局又被称为弹性布局,其出现替代了很多经典的布局方式,下面从flex布局中经常会用到的样式和样式的运用来展开。使用flex布局flex布局在块级容器中可以直接使用display:flex来表示容器内的布局为flex布局.container{ display:flex;}而对于行内标签,display的属性值可以设置为inline-flex来表示行内标签里面的布局...原创 2019-05-26 01:56:11 · 1690 阅读 · 0 评论 -
css实现圆形进度条加载动画
这里我会把遇到这个需求时的实现过程和遇到的问题记录下来,如果只是要看最终实现结果可直接滑到底部看实现代码。我们经常可以看到网上有一些圆形进度条跟随数字的变化慢慢变成一个圆,这个动画实际上可以通过纯css来实现通常情况下,我们实现这种结构只需要使用border-radius和padding就可以实现上图的样子,但是要实现动画,我们需要采取别的方式,这里要使用一个不常用的样式---clip...原创 2019-06-01 02:03:16 · 3318 阅读 · 0 评论 -
瀑布流布局的介绍和实现(JavaScript和纯css)
瀑布流布局在很多场景适用,最常见到的就是在商品网站,尤其是二手网站,由于用户上传的照片大小不一,如果压缩用户的照片或者切割照片可能会影响照片内容的呈现,如果不做任何处理,又会使整个页面看起来很乱,所以我们使用瀑布流布局来解决这个问题。瀑布流布局简介瀑布流布局,表现为参差不齐的多栏布局,随着页面滚动会不停呈现新内容的布局,瀑布流布局可用于无限滚动的页面,在每次滚动的时候将瀑布流布局的实现...原创 2019-07-24 23:38:51 · 424 阅读 · 0 评论