标签： css

暗夜发光,独自闪耀,盘点网页暗黑模式(DarkMode)下的特效和动效,CSS3实现

众所周知，网页的暗黑模式可以减少屏幕反射和蓝光辐射，减少眼睛的疲劳感，特别是在夜间使用时更为明显。其实暗黑模式也给霓虹灯效应（Neon Effect）提供了发挥的环境。 霓虹灯效应是一种视觉效果，其特点是在深色背景上使用鲜艳的颜色来产生强烈的视觉冲击。这种效应通常用于设计海报、广告、标志和网页等。霓 ...

Ajax及其应用

（目录） Ajax 工作原理 Ajax Ajax 是前后端异步交互的工具，异步更新，ajax 包含 XMLHttpRequests 对象（异步地与服务器交换数据，AJAX 核心） JavaScript/DOM（信息显示/交互） CSS（给数据定义样式） XML 或 JSON（作为转换数据的格式） 工 ...

webgl 系列 —— 变换矩阵和动画

其他章节请看： webgl 系列 变换矩阵和动画 动画就是不停地将某个东西变换（transform）。例如将三角形不停地旋转就是一个动画 和 CSS transform 类似，变换有三种形式：平移、缩放和旋转。 简单的变换用普通表达式容易实现，如果事情复杂，比如旋转后平移，这时就可以使用变换矩阵。 ...

CSS流动布局-页面自适应

项目中经常会碰到页面自适应的问题，例如：商城的列表展示、分类列表展示等页面，如下： 该页面会随着页面的放大缩小而随之发生变化，解决方法：display: flex;配合子元素的动态宽度来实现，子元素的宽度 = (总宽 - 自身的margin) / 每行的数量即可。 .box{ border: 1px ...

HTML列表

w3c机构：规定网页分成三个部分：结构、样式、表现形式。 无序列表： （每个列表左侧都有实心黑点，可以用css去掉） <ul> <li>列表1</li> <li>列表2</li> </ul> 快捷方式：ul>li*数量 tab <ul></ul>中只能嵌套<li></li> <li></li>之间相 ...

巧用 CSS 变量，实现动画函数复用，制作高级感拉满的网格动画

本文将介绍一种基于 CSS 变量技巧，通过合理使用 CSS 变量，实现 CSS 动画 @keyframes 的复用。 CSS 变量 CSS 变量大家应该都比较熟悉了，已经不能算是新知识了，快速过一遍。 CSS 变量（CSS Variable），在之前也叫做 CSS 自定义属性，其使用方式如下： // ...

CSS 数学函数与容器查询实现不定宽文本溢出跑马灯效果

在许久之前，曾经写过这样一篇文章 -- 不定宽溢出文本适配滚动。我们实现了这样一种效果： 文本内容不超过容器宽度，正常展示 文本内容超过容器的情况，内容可以进行跑马灯来回滚动展示 像是这样： 但是，之前的方案，有一个很明显的缺点，如果我们事先知道了容器的宽度，那么没问题，但是如果没法确定容器的宽度， ...

CSS全局关键字

css的全局关键字有下面几个： inherit : 继承父级属性 initial：将元素初始化成css的初始值 unset：继承和初始化元素 revert：还原到浏览器内置样式 all：代指所有css属性 下面分别说说这几个关键字的实际作用 inherit 继承父级属性 inherit可以继承父级属 ...