文章库ARTICLE COLUMN

  • CSS3-transition

    CSS3-transition

    摘要:规定应用过渡的属性的名称。规定过渡效果的时间曲线。可能的值是至之间的数值。负值是允许的,这样是元素逆时针旋转。 CSS3之transition实现下划线 在这里先看看我们的demo showImg("https://segmentfault.com/img/remote/1460000014676200"); 认识tra...

    acrazingacrazing 评论0 收藏0
  • 如何降低前端开发的复杂度

    如何降低前端开发的复杂度

    摘要:我们作为前端开发,都应该具有这样的能力。那么如何才能降低业务开发的复杂度呢细分组件都说模块化开发,其实在,这些思想规范之前就已经有模块化开发的规范了,虽然标准从然后隔了年才有了,在那年基本都是函数式开发,一切皆函数。 优秀的程序员总是...

    wushuiyongwushuiyong 评论0 收藏0
  • Fixed with absolute

    Fixed with absolute

    A few concepts offsetWidth: gives you the width the element takes up in pixels. offsetHeight: gives you the height the element takes up in pixels. clientWidth: gives you the size of the space insi...

    wh469012917wh469012917 评论0 收藏0
  • 使用 Nginx 编译 Sass 和 Scss

    使用 Nginx 编译 Sass 和 Scss

    摘要:前端的小伙伴对于或以下统称应该并不陌生,他是一种预处理语言,使用可以极大简化代码的编写和维护。通常情况下,我们在开发环境下使用是在或者环境下,通过监听文件修改来实时编译并输出到浏览器。 前端的小伙伴对于 Sass 或 Scss(以下统称 Sass) ...

    ACb0yACb0y 评论0 收藏0
  • 前端每日实战:9# 视频演示如何用纯 CSS 创作一种按钮被瞄准的交互特效

    前端每日实战:9# 视频演示如何用纯 CSS 创作一种按钮被瞄准的交互特效

    摘要:效果预览按下右侧的点击预览按钮在当前页面预览,点击链接全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg("https://segmentfault.com/img/bVbb1Vv?w=500&h=500"); 效果预览 按下右侧的点击预览按钮...

    solocodersolocoder 评论0 收藏0
  • Styled-Components

    Styled-Components

    摘要:它是通过改变编写方式的解决方案之一,从根本上解决常规编写的一些弊端。通过来为赋能,我们能达到常规所不好处理的逻辑复杂函数方法复用避免干扰。他搭配可能将模块化走向一个更高的高度,样式书写将直接依附在上面,三者再次内聚。 Styled-Component...

    ingoodingood 评论0 收藏0
  • 前端每日实战:10# 视频演示如何用纯 CSS 创作一个同心圆弧旋转 loader 特效

    前端每日实战:10# 视频演示如何用纯 CSS 创作一个同心圆弧旋转 loader 特效

    摘要:效果预览按下右侧的点击预览按钮在当前页面预览,点击链接全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg("https://segmentfault.com/img/bVbb1Vy?w=500&h=500"); 效果预览 按下右侧的点击预览按钮...

    jonh_felixjonh_felix 评论0 收藏0
  • Codepen 每周精选:22个页面特效(2018-5-2)

    Codepen 每周精选:22个页面特效(2018-5-2)

    摘要:按下右侧的点击预览按钮可以在当前页面预览,点击链接可以打开原始页面。 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以打开原始页面。 1. 观影打分特效https://codepen.io/PointC/pen... 2. 纯 css 写的骑自行车的动画https://codepen...

    ddongjian0000ddongjian0000 评论0 收藏0
  • 前端将数据转化为弹幕效果的实现方式

    前端将数据转化为弹幕效果的实现方式

    摘要:执行弹幕的函数。采用定时器移动,这里是根据内容长度定义弹幕的移动速度。移动弹幕的过程中判断四个通道是否处于闲置状态,当移动出了屏幕,移动并且清除定时器。第一部分先判断数据是否加载完成这里是一个定时器,设置为秒。 前言 这个需求如题,大...

    _Dreams_Dreams 评论0 收藏0
  • 什么是CSS Modules ?我们为什么需要他们

    什么是CSS Modules ?我们为什么需要他们

    摘要:我们将去探索它的目的和主旨。这到底是什么呢我们为什么要这么做呢我们很快就进行介绍。我们不需要人为处理和文件。我们不写纯,我们需要在一个类似这样的文件中取写我们所有的标签。这就是样式也有作用域的原因。换句话说消除了特殊性问题。 原文地址...

    dongfangyiyudongfangyiyu 评论0 收藏0
  • 前端领域的BEM到底是什么

    前端领域的BEM到底是什么

    摘要:在这篇译什么是我们为什么需要他们的结尾处,明确指出不需要,那么到底是什么呢下面我将把官网的教程翻译出来,带领大家搞清楚前端领域的到底是什么。命名在计算机科学领域,只有个非常难解决的问题一个是缓存失效,而另一个则是命名。 在这篇【译】什...

    GitChatGitChat 评论0 收藏0
  • 【图片版】CSS网格布局(Grid)完全教程

    【图片版】CSS网格布局(Grid)完全教程

    摘要:简言网格布局是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式。例用属性和定义网格,同时定义网格线名称。例一组区域名称要放在单引号或双引号内,每一个名称之间以空格分隔。例本例中,是通过隐式网 简言 CSS网格布局(Grid)是一套...

    ddongjian0000ddongjian0000 评论0 收藏0
  • 深入理解css盒子模型

    深入理解css盒子模型

    摘要:下面我们就一步一步揭开的神秘面纱,深入理解盒模型,这对我们在布局上会有一个质的提升。与内联元素的百分比值与内联元素。 css是一门具象语言,并不像js那样具有逻辑性,因此,就算入行了前端很久的工程师,也觉得css难以掌握。下面我们就一步一步揭...

    gplanegplane 评论0 收藏0
  • 小卡片左右滑动的实现

    小卡片左右滑动的实现

    摘要:副卡只为最右测卡片适配问题适配问题涉及到了两个卡片的接口数据全部读完并渲染完成后,卡片完美呈现,上的滑动也很流畅,但是当滑动的速度很快的时候,安卓上就有问题了,滑动速度过快会导致刚滑出来的卡片变成白板,卡片上的图片和文字都不见了。 背...

    jsbintaskjsbintask 评论0 收藏0
  • 用 margin 还是用 padding ?

    用 margin 还是用 padding ?

    摘要:空白区通常是指其他元素不能出现且父元素背景可见的区域。很自然,用于影响这个区域的属性是。权威指南何时应当使用需要在外侧添加空白时。是用来隔开元素与元素的间距用于布局分开元素使元素与元素互不相干。何时应当时用需要在内测添加空白时。 边界...

    zhaofeihaozhaofeihao 评论0 收藏0
  • vertical-align:垂直对齐方式相关说明

    vertical-align:垂直对齐方式相关说明

    摘要:关于盒子模型相关的东西,我们会多带带去仔细说明,因为非常重要,这里只是给出简单的说明,包括下面的行高等一样内容区域一种围绕着文字看不见的盒子,大小和有关。 作者:心叶时间:2018-04-28 09:23 第一步:行内盒子模型。 为什么明明说的是垂直对...

    BenCHouBenCHou 评论0 收藏0
  • 前端每日实战:6# 视频演示如何用纯 CSS 绘制一颗闪闪发光的璀璨钻石

    前端每日实战:6# 视频演示如何用纯 CSS 绘制一颗闪闪发光的璀璨钻石

    摘要:效果预览按下右侧的点击预览按钮在当前页面预览,点击链接全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg("https://segmentfault.com/img/bVbbyvw?w=500&h=500"); 效果预览 按下右侧的点击预览按钮...

    willinwillin 评论0 收藏0
  • html+css 核心知识总结

    html+css 核心知识总结

    摘要:空元素,主要讲下可算内联元素,因为可与其他元素同行,且宽高对其起作用。提示对内联元素宽高起作用,请使用谈谈对定位的理解生成绝对定位的元素,相对于定位以外的第一个父元素进行定位。 Html 1.解释 ,主要从utf-8展开,utf-8是一种字符编码,该编...

    jindongjindong 评论0 收藏0
  • 小会计记账 小程序 走一波

    小会计记账 小程序 走一波

    摘要:小会计记账小程序最近同事接了个活,提供接送客户的服务,为了方便根据每天接送客户数量记一波账,于是就搞了一个记账类的小程序,记录每天的进账情况。目前正在开发中。还提供了生命周期函数,让我们更好的把控小程序。 小会计记账小程序 最近同事接...

    LinkedME2016LinkedME2016 评论0 收藏0
  • Codepen 每日精选(2018-4-28)

    Codepen 每日精选(2018-4-28)

    摘要:按下右侧的点击预览按钮可以在当前页面预览,点击链接可以打开原始页面。 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以打开原始页面。 页面目录特效https://codepen.io/suez/pen/k... 选单交互效果https://codepen.io/suez/pen/X... ...

    EsgynChinaEsgynChina 评论0 收藏0
  • css之简易水波效果

    css之简易水波效果

    摘要:后期准备使用面向对象的写法完成,将水波的大小颜色范围过渡等效果进行开发者自定义,或许会加入更多的效果 css之水波效果 没事实现了一个小效果,贴上来分享分享 先看看效果showImg("https://segmentfault.com/img/bV9FNE?w=526&h=233"); 上代码 :...

    MiracleMiracle 评论0 收藏0
  • 一些居中方式的总结

    一些居中方式的总结

    摘要:居中水平居中对于子元素是行内元素或者时使用父元素宽度无论确定不确定均可实现相对于父元素水平居中。 居中 水平居中 对于子元素是行内元素(或者inline-block)时使用text-aling: center; ,父元素宽度无论确定不确定,均可实现相对于父元素水平居中。 ...

    renweihubrenweihub 评论0 收藏0
  • 前端每日实战:7# 视频演示如何用纯 CSS 创作一个 3D 文字跑马灯特效

    前端每日实战:7# 视频演示如何用纯 CSS 创作一个 3D 文字跑马灯特效

    摘要:效果预览按下右侧的点击预览按钮在当前页面预览,点击链接全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg("https://segmentfault.com/img/bVbfmGm?w=400&h=303"); 效果预览 按下右侧的点击预览按钮...

    huaixiaozhuaixiaoz 评论0 收藏0
  • 原生css变量声明

    原生css变量声明

    摘要:原生变量声明噫我为什么要用原生这个名词啊,管他呢。我发现了一个不得了的东西,接触前端都有一年多的时间了,今天才知道原生也可以变量声明这个黑科技啊。 原生css变量声明 噫~~~我为什么要用原生css这个名词啊,管他呢。我发现了一个不得了的东西,...

    ImfanImfan 评论0 收藏0
  • 基于Vue实现拖拽升级(九宫格拖拽)

    基于Vue实现拖拽升级(九宫格拖拽)

    摘要:前言在本文中将会用完成九宫格拖拽效果,同时介绍一下网格布局。到这里我们就把基于的九宫格拖拽实现了,有问题或者发现错误的请指正,谢谢大家珍惜淡定的心境,苦过后更加清 前言 在本文中将会用Vue完成九宫格拖拽效果,同时介绍一下网格布局。具体代...

    RyanQRyanQ 评论0 收藏0

热门文章

<