摘要：纯 CSS 实现波浪效果！ 一直以来，使用纯 CSS 实现波浪效果都是十分困难的。 因为实现波浪的曲线需要借助贝塞尔曲线。 而使用纯 CSS 的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。 当然，借助其他力量（SVG、CANVAS），是可以很轻松的完成所谓的波浪效果的，先看看，非 CSS 方式实 阅读全文

摘要：Less变量 一、Less简介 二、Less中的变量 三、less外部引入 一、Less简介 1.Less是一门css的预处理语言，less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式。 变量名以两条短横线命名 例如： --color：red 2.Less特点： less的语 阅读全文

摘要：预处理器 Less 的十个语法 Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。 不过浏览器只能识别 CSS 语言，所以 Less 语言直接运行在浏览器端是不被识别的，需要我们通过一些方式将其先转 阅读全文

摘要：css怎么让动画一直播放 CSS动画是为网页添加动态效果的常用技术。然而，有些动画在播放一次后就停止了，无法一直重复播放。下面我们将介绍如何使用CSS让动画一直播放。 首先，我们需要使用CSS关键帧（keyframes）来定义动画。keyframes允许我们指定动画在不同的帧（或时间点）上的样式。例 阅读全文

摘要：.lineBarDis { height: 8px; background-image: linear-gradient(to right, #011c72 0%, #c7ced2 100%); animation: myAnimation 1.5s infinite; /* 设置动画为2秒钟的时间 阅读全文

摘要：flex-shrink: 0;添加这个属性到不生效的盒子上 阅读全文

摘要：linear-gradient(182deg, #e6e9eb, #117fb5) 参考俄罗斯网站 阅读全文

摘要：涨姿势了，有意思的气泡 Loading 效果 今日，群友提问，如何实现这么一个 Loading 效果： 这个确实有点意思，但是这是 CSS 能够完成的？ 没错，这个效果中的核心气泡效果，其实借助 CSS 中的滤镜，能够比较轻松的实现，就是所需的元素可能多点。参考我们之前的： 使用纯 CSS 实现超酷 阅读全文

摘要：新的 CSS 伪类函数 :is() 和 :where() Posted on 2022-08-15 14:39 书中枫叶 阅读(48) 评论(0) 编辑 收藏 举报 :is() 和 :where() 标题中的 <b> 标签进行颜色调整： h1 > b, h2 > b, h3 > b, h4 > b, 阅读全文

摘要：CSS简易毛玻璃效果 oo小陈同学 2021年06月30日 14:35 · 阅读 5199 CSS 毛玻璃效果 一、什么是毛玻璃效果？ 背景模糊的磨砂玻璃效果 空间物体漂浮多层次 鲜艳的色彩突出模糊的透明度 半透明物体上有一个细微的光线边界 二、如何实现？ .example{ background: 阅读全文

摘要：文章源于 background-clip - CSS：层叠样式表 | MDN (mozilla.org) background-clip background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。 尝试一下 如果没有设置背景图片（background- 阅读全文

摘要：优化 CSS 代码的12个小技巧 2022-11-25 09:03·Echa攻城狮 大家好，我是 Echa。 今天来分享 12 个优化 CSS 代码小技巧！ 1. 避免高消耗属性 分析表明，一些CSS属性的渲染速度比其他属性慢，因此应该谨慎使用。包括以下属性： box-shadow border-r 阅读全文

摘要：48个高颜值的CSS在线工具大全 原创2023-01-13 08:00·Echa攻城狮 大家好，我是Echa。 最近有一部分粉丝们总是私信小编，作为一个前端或者全栈程序员怎么系统化学CSS，怎么通过CSS来实现炫酷的动画效果呢？ 小编简单地聊一下，我自己是怎么学习CSS的，仅是自己的一点小心得，仅供 阅读全文

摘要：前端布局小案例，如何创建漂亮的毛玻璃输入表单卡片效果 原创2023-03-06 07:30·前端达人 转载说明：原创不易，未经授权，谢绝任何形式的转载 在当今互联网时代，用户体验是至关重要的。当我们在设计网站或应用程序时，一个漂亮、吸引人的界面往往是吸引用户并提高用户满意度的关键因素之一。而一个好看 阅读全文

摘要：巧用 CSS 变量，实现动画函数复用，制作高级感拉满的网格动画 本文将介绍一种基于 CSS 变量技巧，通过合理使用 CSS 变量，实现 CSS 动画 @keyframes 的复用。 CSS 变量 CSS 变量大家应该都比较熟悉了，已经不能算是新知识了，快速过一遍。 CSS 变量（CSS Variab 阅读全文

摘要：CSS小知识，建议这样使用平滑滚动、 hidden属性、resize 原创2023-02-24 00:11·前端达人 转载说明：原创不易，未经授权，谢绝任何形式的转载 当开发 Web 应用时，良好的用户体验是至关重要的。通过使用正确的 CSS 属性和值，我们可以创建易于使用和功能强大的应用程序。然而 阅读全文

摘要：2023年，推荐10个有用的CSS在线生产力工具，让你事半功倍 原创2023-01-11 20:28·前端达人 谈到 CSS，您总是必须编写许多代码行，才能使您的项目在样式方面看起来美观大方。当然，专注于为前端编写好的 CSS 很重要，但这个过程可能会花费很多时间。 作为 Web 开发人员，CSS 阅读全文

摘要：:global { .odd { background-color: #fff; } .even { background-color: rgba(250, 250, 250, 1); } } import { Space, Table, Tag } from "antd"; import Reac 阅读全文

摘要：div支持字符串\n换行 标签： 数据库存有包含换行的字符串，要显示再html页面中 页面中并没有显示换行 div支持换行字符串 虽然可以使用pre，但是个人不太喜欢这种方式，希望能用css实现，通过一番搜索，终于找到方法 使用css: white-space: pre; 效果： 方案二 把\n替换 阅读全文

摘要：如果flex布局中justify-content设置为space-between、space-evenly或者space-around 并且最后一行与上面一行个数不同时，布局会裂开 1个container父元素包裹了7个item子元素，1行想设置4个，最后一行的item不到4个，但想靠左 <div 阅读全文