手摸手，带你实现移动端H5瀑布流布局
移动端瀑布流布局是一种比较流行的网页布局方式，视觉上来看就是一种像瀑布一样垂直落下的排版。每张图片并不是显示的正正方方的，而是有的长有的短，呈现出一种不规则的形状。但是它们的宽度通常都是相同的 因为移动端瀑布流布局主要为竖向瀑布流，因此本文所探讨的是竖向瀑布流 特点 竖向瀑布流布局主要有下面几种特点 ...
离谱的 CSS！从表盘刻度到艺术剪纸
某日，群里有这样一个问题，如何实现这样的表盘刻度： 这其实是个挺有意思的问题，方法也有很多。 单标签，使用 conic-gradient 实现表盘刻度 最简单便捷的方式，就是利用角向渐变的方式 conic-gradient，代码也非常简单，首先，我们实现一个重复角向渐变： <div></div> d ...
vue - Vue组件化编程
今天是对vue组件化的一个理解，最主要的单文件组件，然后就可以脚手架的学习了，本来昨晚就该上传的，但是用的那个上传博客园的Python脚本不行了，换了一个新的。 组件化让我越来越感觉到框架的力量了 一.模块与组件，模块化与组件化 1.对组件的理解 如果以我们原来编写一个网页的方式 依赖关系混乱我就不 ...
vue - vue基础/vue核心内容（终结篇）
今天是vue基础、vue核心内容第三天，也是最后一天，后面开始进入组件化学习，整个基础内容以生命周期的结束而结束，不得不说，张天禹把这节课讲活了，开始觉得vue是一个有生命的东西，包括前面所说的很多脏活累活都给他做，我们只管调用，说的我都于心不忍如此对待vue了，所以思来想去，我绝对对待它最好的办法 ...
现代 CSS 解决方案：CSS 数学函数
在 CSS 中，其实存在各种各样的函数。具体分为： Transform functions Math functions Filter functions Color functions Image functions Counter functions Font functions Shape f ...
组件设计要求
前言 在我们日常代码开发过程中，组件的使用是必不可少的，我们也会去封装组件。但是大家写组件的风格各式各样，没有一个统一的准则。而且也没有遵循软件开发的原则：高内聚、低耦合；因为我是给行业提供代码的，行业给交付提供代码。我们要尽量去减少大家的接入成本，降低接入成本的最好方案就是我们在设计组件的时候编写 ...
跳动的“loading”，个个都很惊艳！
大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！ 原文链接 ==>http://sylblog.xin/archi ...
前端周刊：2022-6 期
前端周刊：2022-6 期 前端开发 videojs-plugin-marker--videojs 进度条打点插件 基于 videojs-marker-plugin 项目二次开发，支持 marker 点更新和 marker 点击事件；更换构建工具为 Vite。 @cutting-mat/direct ...
CSS 不规则的轮廓-outline
大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！ 原文链接 ==>http://sylblog.xin/archi ...
使用CSS实现《声生不息》节目Logo
《声生不息》 是芒果TV、香港电视广播有限公司和湖南卫视联合推出的港乐竞唱献礼节目，听着音乐仿佛回到了那个令人怀念的港风席卷整个亚洲的年代。该节目 Logo 采用经典红蓝配色，无限符号 ∞ 造型，满满的设计感。本文在仅采用原生 CSS 的情况下，尽量还原实现该 Logo 造型，本文内容虽然非常简单，... ...
css基础
CSS CSS就是Cascading Style Sheet的缩写，中文译作“层叠样式表”或者是“级联样式表”，是用于控制网页外观处理并允许将网页的表现与内容分离的一种标记性语言，CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)，是Web网页开发技术的重要组成部分。 那么接下来，继续看 ...
CSS cursor属性介绍
使用方法 1 <!-- cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状；--> 2 div { 3 cursor: [某个值] 4 } 基本属性 值描述 url 需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 ...