CSS共0篇 第5页
CSS
排序
【CSS】面试官问我视差滚动怎么实现？我懵了…
我正在参加「掘金·启航计划」 视差滚动 视差滚动是一种效果，能够使不同层次的元素以不同的速度进行滚动，从而产生了视觉上的深度感和动态效果。可以通过两种方式来实现：background-attachmen...
2年前21天筑基期–CSS系列
CSS篇 两种盒模型 标准盒模型：元素的宽度和高度只包括内容（content），不包括内边距（padding）、边框（border）和外边距（margin）。 实际宽度\高度 = width\height IE盒模型：元素的宽度和...
2年前
View Transition API —— 给 Web 动效锦上添花
? 转载请注明出处。 欢迎来到新玩具乐园，今天我们来上手把玩 View Transition API。 一、Why View Transition Transition 指的是 UI 层面的状态过渡，恰当的过渡效果能带给用户舒适感，提升产...
2年前CSS使用JS变量
一、前置知识点 JS设置CSS变量 通过document.documentElement.style.setProperty()方法将变量设置为CSS变量。 例如下面的用法： document.documentElement.style.setProperty('--myColor', 'pin...
2年前简述 pt、rpx、px、em、rem、%、vh、vw的区别
设备物理像素 pt：屏幕宽、分辨率，其中每一小份就是1pt。 css 像素 px： pc 机大屏幕显示器，1px约等于0.76个物理像素 手机小屏幕：以IPhone6为标准，物理像素750，分辨率375 1px = 2pt。 px ...
2年前
基于 tailwindcss 的多端自适应布局方案
近期，我在做一个项目。老板希望我们的产品在不同的设备上都能有良好的用户体验，同时，为了节省人力成本，希望在同一套代码上去针对不同的屏幕尺寸去做样式适配。因为我选择了 tailwindcss 作...
2年前
网页字体度量及渲染
字体度量（Font Metrics） 字体度量是每个字体文件内的配置，如下图 1 和图 2 为用 FontForge 查看得到的 Catamaran 字体的度量属性。为了方便后文展示 Line Gap，此处手动将 Catamaran 字体的 ...
2年前
6月16日，企业快成长技术创新论坛厦门站大数据专场开启！
全球大数据规模增长快速，2020年全球新增数据规模为64ZB，是2016年的400%，2035年新增数据将高达2140ZB1，大数据呈现指数级增长。随着数字经济的发展和数字化转型的深入，愈来愈多的数据资源正...
2年前
通过css 的 scroll-snap 实现整屏滑动
前言 整屏滑动是比较常见的场景，用户只需要轻轻滑动一下，即可切换整屏的内容，对用户体验， UI排版来说是很有用的，之前我们实现这个功能需要借助一些js来实现，现在仅仅只需要两个css即可轻...
2年前
通过构建背景图学习CSS径向渐变
本文翻译自 Learn CSS radial-gradient by Building Background Patterns，作者：Temani Afif 略有删改 如果你是CSS渐变的新手，你可能听说过radial-gradient()。如果以前从未使用过它，那么这...
2年前常用组件?文本省略（支持单行/多行，提示自适应）
✨背景 哈喽，我是JLong?，日常开发中，我们常常会遇到文本省略场景，业界常见UI库如Elment-ui中el-table提供show-overflow-tooltip属性支持内容过长时候省略显示tooltip，但经常有一些场景用户...
2年前
笔记：实现类似微信朋友圈图片预览功能
效果 先看效果图，再讲解，遇到这个需求，感觉还挺有意思的，记录下来 思路 我的思路是这样，有六张或者九张图片，肯定是有很多个朋友发朋友圈的，每一个朋友是一个数组，而他发多少张图片又是...
2年前记录一个显示svg图标遇到的问题及解决方案
我们写了一个h5活动页面放在微信公众号上，该页面有一个 svg 的小图标，我一开始直接使用了 img 标签进行显示，结果在 iphone 设备上，该图标渲染出来有一些模糊。经过查询资料才知道，在 iphon...
2年前
彻底搞懂 Vue 中的 scoped 原理和 /deep/ 深度选择器原理
背景 我们做 Vue 项目在组件里写 css 的时候，经常会给 <style> 标签加上 scoped ，比如这样： <style lang='less' scoped> ，这样写出来的 css 就是局部的，不会影响其他组件。 另...
2年前
❤️创意网页：绚丽粒子雨动画
博主：命运之光 专栏：web前端（创意网页） **前言：**欢迎踏入我的Web项目专栏，一段神奇而令人陶醉的数字世界！?在这里，我将带您穿越时空，揭开属于Web的奥秘。通过HTML、CSS和JavaScript的...
2年前
CSS字体相关属性
我正在参加「掘金·启航计划」 在网页设计中，字体是一个非常重要的元素。正确选择和使用字体可以使网页更加美观、易读和易于理解。CSS提供了一系列字体相关的属性，可以帮助我们控制字体的大小...
2年前
一文吃透 CSS Flex 布局
原文链接：一文吃透 CSS Flex 布局 教学游戏 这里有两个小游戏，可用来练习 flex 布局。 塔防游戏 送小青蛙回家 Flexbox 概述 Flexbox 布局也叫 Flex 布局，弹性盒子布局。 它决定了元素如何在...
2年前
两行CSS帮助页面提升了近7倍渲染性能！
一、前言 对于前端人员来讲，最令人头疼的应该就是页面性能了，当用户在访问一个页面时，总是希望它能够快速呈现在眼前并且是可交互状态。如果页面加载过慢，你的用户很可能会因此离你而去。所...
2年前
什么！一个项目给了8个字体包？？？
? 遇到的问题 在一个新项目中，设计统一了项目中所有的字体，并提供了字体包。在项目中需要按需引入这些字体包。 首先，字体包的使用分为了以下几种情况： 无特殊要求的语言使用字体A，阿拉伯...
2年前
如何给你的个人博客添加点赞功能
最近在重构博客，想要添加一些新功能。平时有看 Josh W. Comeau 的个人网站，他的每篇文章右侧都会有一个心形按钮，用户通过点击次数来表达对文章的喜爱程度。让我们来尝试实现这个有趣的点赞功...
2年前