文章库ARTICLE COLUMN

  • 前端每日实战:67# 视频演示如何用纯 CSS 创作单元素点阵 loader

    前端每日实战:67# 视频演示如何用纯 CSS 创作单元素点阵 loader

    摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。源代码下载每日前端实战系列的全部源代码请从下载代码解读定义,只有个元素居中显示定义容器尺寸用画出组点阵定义动画最后,把动画效果应用到点阵上大功告成 showImg("https...

    ziluzilu 评论0 收藏0
  • 26自学转行前端(写给和1年前一样迷茫的我的你)

    26自学转行前端(写给和1年前一样迷茫的我的你)

    摘要:转行前端有哪些疑虑在人生的抉择处,寻求一些别人的经验和总结,无可厚非,但是决定了就一定要坚定的走下去,谨慎是为了更好的坚持,而不是放弃的理由。写在前面这里前后端指的是开发的前后端。 转行前端有哪些疑虑? 在人生的抉择处,寻求一些别人的...

    番茄西红柿番茄西红柿 评论0 收藏2637
  • 前端每日实战 2018 年 5 月份项目汇总(共 30 个项目)

    前端每日实战 2018 年 5 月份项目汇总(共 30 个项目)

    摘要:过往项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书频演示如何用纯创作一种按钮被瞄准的交互特效视频演示如何用纯创作一个同心圆弧旋转特效...

    liaoyg8023liaoyg8023 评论0 收藏0
  • 前端每日实战:66# 视频演示如何用纯 CSS 创作一台咖啡机

    前端每日实战:66# 视频演示如何用纯 CSS 创作一台咖啡机

    摘要:可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。为咖啡机增加光影定义咖啡流动的前半段动画,即咖啡从出水口流到杯中定义咖啡流动的后半段动画,即出水口停止流出咖啡,剩余咖啡流到杯中大功告成 showImg("https://segmentfaul...

    shenhualongshenhualong 评论0 收藏0
  • [CSS]《CSS揭秘》第四章——视觉效果

    [CSS]《CSS揭秘》第四章——视觉效果

    摘要:投影单侧投影邻边投影双侧投影模糊距离阴影尺寸不规则投影滤镜可接受的参数基本上跟属性是一样的,但不包括扩张半径,不包括关键字,也不支持逗号分割的多层投影语法毛玻璃效果折角效果 投影 单侧投影 box-shadow:0px 10px 10px -5px black; showImg("...

    AWangAWang 评论0 收藏0
  • 小于12px的文本居中问题

    小于12px的文本居中问题

    摘要:前几天在做项目的过程中,关于字体小于时,很难做到完全居中显示,表示有点抓狂,各种百度找到一个貌似还不错的方法,总结出来分享给你和我。 前几天在做项目的过程中,关于字体小于12px时,很难做到完全居中显示,表示有点抓狂,各种百度找到一个貌似...

    HelKyleHelKyle 评论0 收藏0
  • [CSS]《CSS揭秘》第五章——字体排印

    [CSS]《CSS揭秘》第五章——字体排印

    摘要:连字符断行需要在的属性指定支持的语言尚未支持与结合使用插入换行避免首个前面也加入空行换行符避免逗号前面的空格,不一定为文本行的斑马条纹调整的宽度连字华丽的符号自定义下划线现实中的文字效果发光字效果环形文字 连字符断行 hyphens:auto; *:...

    lordharrdlordharrd 评论0 收藏0
  • webpack+vue+koa+mongoDB,从零开始搭建一个网站

    webpack+vue+koa+mongoDB,从零开始搭建一个网站

    摘要:地址的搭建新建项目文件夹初始化项目搭建的基本框架同时安装依赖版本号的热更新创建一个文件夹,创建一个文件测试能否打包,发现报错缺少在文件里面的入口上面加上现在先是在本地跑起来,如果是生产环境的话,此时再进行打包打包成功。 github 地址 ht...

    xumengerxumenger 评论0 收藏0
  • JavaScript 工作原理之十三-CSS 和 JS 动画底层原理及如何优化其性能

    JavaScript 工作原理之十三-CSS 和 JS 动画底层原理及如何优化其性能

    摘要:关键帧是用来通知浏览器在规定的时间点上应有的属性值然后填充空白。每一对数值内包含表示三次贝塞尔曲线控制点的和坐标。即使每个控制点的和值的微小差异都会输出完全不同的贝塞尔曲线。 原文请查阅这里,本文采用知识共享署名 4.0 国际许可协议共享...

    winterdawnwinterdawn 评论0 收藏0
  • 十分钟复习CSS盒模型与BFC

    十分钟复习CSS盒模型与BFC

    摘要:盒模型与本文为收集整理总结网上资源旨在系统复习盒模型与节省复习时间阅读分钟什么是盒模型每一个文档中,每个元素都被表示为一个矩形的盒子它都会具有内容区盒模型主要分两种标准盒模型盒模型怪异盒模型两者的区别标准盒模型的宽高则为内容区域的宽高...

    suxiersuxier 评论0 收藏0
  • [CSS]《CSS揭秘》第二章——背景与边框

    [CSS]《CSS揭秘》第二章——背景与边框

    摘要:半透明边框相关语法多重边框方案需要注意的是,上面所创建的边框是伪边框,并不响应鼠标事件。方案以左上角为基准。图像边框连续的图像边框属性规定背景的绘制区域。 半透明边框 border:10px solid hsla(0,0%,100%,.5); background: white; ...

    elinaelina 评论0 收藏0
  • 前端每日实战:65# 视频演示如何用纯 CSS 创作一个摇摇晃晃的 loader

    前端每日实战:65# 视频演示如何用纯 CSS 创作一个摇摇晃晃的 loader

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

    fai1017fai1017 评论0 收藏0
  • JS基础入门篇(三十五)—面向对象(二)

    JS基础入门篇(三十五)—面向对象(二)

    摘要:如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的基础入门篇三十四面向对象一 如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)—面向对象(一)...

    DonneDonne 评论0 收藏0
  • CSS3渐变效果工具

    CSS3渐变效果工具

    摘要:推荐一个渐变效果工具,觉得有帮助的可以收藏下。工具链接渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡。 推荐一个css3渐变效果工具,觉得有帮助的可以收藏下。 工具链接 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平...

    toddmarktoddmark 评论0 收藏0
  • 前端每日实战:64# 视频演示如何用纯 CSS 绘制一个足球场

    前端每日实战:64# 视频演示如何用纯 CSS 绘制一个足球场

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

    wemallshopwemallshop 评论0 收藏0
  • 真的,移动端尺寸自适应与dpr无关

    真的,移动端尺寸自适应与dpr无关

    摘要:做移动端自适应时可能很多人都对自适应和之间的关系产生疑问也有一些人会疑虑比如我的自适应方案没有加会不会出问题针对这些疑问我说一下我的见解。 做移动端自适应时可能很多人都对自适应和dpr之间的关系产生疑问,也有一些人会疑虑比如我的自适应方案...

    geekzhougeekzhou 评论0 收藏0
  • 总结下常见布局解决方案

    总结下常见布局解决方案

    摘要:总结了几种常见的页面架构布局方案居中布局水平居中垂直居中水平垂直多列布局自适应布局等宽布局等高布局居中布局水平居中水平居中布局垂直居中水平垂直居中多列布局自适应布局定宽自适应 总结了几种常见的页面架构布局方案1.居中布局 a.水平居中 b.垂...

    newtreknewtrek 评论0 收藏0
  • [CSS]《CSS揭秘》第三章——形状

    [CSS]《CSS揭秘》第三章——形状

    摘要:自适应椭圆斜杠前为水平半径,后为垂直半径。和下特有的,用于在渲染中向元素逻辑上的头部或尾部添加内容。所以不要用或展示有实际意义的内容,尽量使用它们显示修饰性内容,例如图标。和必须配合属性来使用,用来定义插入的内容,必须有值,至少是空。...

    ysl_unhysl_unh 评论0 收藏0
  • CSS3帧动画

    CSS3帧动画

    摘要:在制作帧动画的时候,一般采用雪碧图的方式,通过切换图片的位置,使其连续播放,从而形成动画。使用改造之后的代码,利用伪类进行背景填充,然后控制该元素移动来实现逐帧动画。 在制作帧动画的时候,一般采用雪碧图的方式,通过切换图片的位置,使其...

    NinoNino 评论0 收藏0
  • SVG图片文件转换成Inline Code 的非完美解决方案

    SVG图片文件转换成Inline Code 的非完美解决方案

    摘要:图片可以用代码控制其样式但作为图片导入的时候不起作用这时候可以用这种办法图片文件转换成使用图片的好处很多其中因为图片本身就是有代码构成的矢量图片代码是所以可以对其进行修饰也就是说能够对图片的元素进行动态的样式变换但在网页中使用资源的时...

    vslamvslam 评论0 收藏0
  • 动画历程之滚动的坑

    动画历程之滚动的坑

    摘要:很多时候我们在上做动画一般都是选择滚动事件来触发。而在移动端的浏览器或中,滚动事件的触发频率也是不同的。在中在视图的滚动过程中,事件不会被触发在滚动结束后,才会触发和不受此影响。但是滚动触发事件与滚动距离以及完成的时间有关。 很多时候...

    BlackjunBlackjun 评论0 收藏0
  • 排名前10的vue前端UI框架框架值得你掌握

    排名前10的vue前端UI框架框架值得你掌握

    摘要:之前得到消息在已经超过成为第一大框架,让我们来看看以为基础的开发框架有哪些饿了么前端推出的基于的后台组件库,它能够帮助你更轻松更快速地开发项目官网地址一套基于的高质量组件库友好的,自由灵活地使用空间,细致漂亮的。 之前得到消息vue在Git...

    lmxdawnlmxdawn 评论0 收藏0
  • 踩了pointer-events:none的坑

    踩了pointer-events:none的坑

    摘要:出现一前端同事跟我说你把这段加到全局的里面然后,悲剧了,上线后发现我的图片都不能点击了。解决情急之下,在所有需要点击的标签外边都包了一层,把点击事件移到上,了,但是并不知道做了什么导致了这样的问题。 bug出现:一前端同事跟我说:你把这...

    Terry_TaiTerry_Tai 评论0 收藏0
  • Element UI table参数中的selectable的使用

    Element UI table参数中的selectable的使用

    摘要:参数中的的使用中遇到的坑页面网上搜了说这样返回即为可以勾选反之不可勾选但是嘞我的数据是一个数组于是我改成了这样然后不行,只渲染数组第一位不能勾选循环也是一样的结果这可如何是好说时迟那时快灵光一现,改成了这样完美解决 Element UI table参...

    lei___lei___ 评论0 收藏0
  • js、jQuery实现文字上下无缝轮播、滚动效果

    js、jQuery实现文字上下无缝轮播、滚动效果

    摘要:因项目需要实现消息通知上下无缝轮播的效果,所以写了一下,在这个分享出来,希望再次遇到此需求的道友,可以直接拷贝来用,节约一点不必要的时间。 因项目需要实现消息通知上下无缝轮播的效果,所以写了一下,在这个分享出来,希望再次遇到此需求的道...

    focusjfocusj 评论0 收藏0

热门文章

<