随笔分类 -  css&css预处理框架

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

posted @ 2023-09-18 08:48 漫思 阅读(836) 评论(0) 推荐(0) 编辑

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

posted @ 2023-09-12 10:30 漫思 阅读(560) 评论(0) 推荐(0) 编辑

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

posted @ 2023-09-12 10:25 漫思 阅读(59) 评论(0) 推荐(0) 编辑

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

posted @ 2023-09-01 17:26 漫思 阅读(512) 评论(0) 推荐(0) 编辑

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

posted @ 2023-09-01 16:30 漫思 阅读(7) 评论(0) 推荐(0) 编辑

使用flex布局导致width无效
摘要:flex-shrink: 0;添加这个属性到不生效的盒子上 阅读全文

posted @ 2023-09-01 11:24 漫思 阅读(9) 评论(0) 推荐(0) 编辑

较为好看的渐变色
摘要:linear-gradient(182deg, #e6e9eb, #117fb5) 参考俄罗斯网站 阅读全文

posted @ 2023-08-06 16:57 漫思 阅读(13) 评论(0) 推荐(0) 编辑

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

posted @ 2023-04-16 19:02 漫思 阅读(75) 评论(0) 推荐(0) 编辑

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

posted @ 2023-04-11 11:01 漫思 阅读(12) 评论(0) 推荐(0) 编辑

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

posted @ 2023-03-14 20:42 漫思 阅读(69) 评论(0) 推荐(0) 编辑

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

posted @ 2023-03-14 20:42 漫思 阅读(32) 评论(0) 推荐(0) 编辑

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

posted @ 2023-03-07 18:56 漫思 阅读(22) 评论(0) 推荐(0) 编辑

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

posted @ 2023-03-07 18:51 漫思 阅读(106) 评论(0) 推荐(0) 编辑

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

posted @ 2023-03-07 18:30 漫思 阅读(140) 评论(0) 推荐(0) 编辑

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

posted @ 2023-03-07 17:31 漫思 阅读(29) 评论(0) 推荐(0) 编辑

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

posted @ 2023-03-01 10:42 漫思 阅读(78) 评论(0) 推荐(0) 编辑

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

posted @ 2023-03-01 10:30 漫思 阅读(134) 评论(0) 推荐(0) 编辑

【Antd】Table的斑马线行背景色设置
摘要::global { .odd { background-color: #fff; } .even { background-color: rgba(250, 250, 250, 1); } } import { Space, Table, Tag } from "antd"; import Reac 阅读全文

posted @ 2023-02-14 17:30 漫思 阅读(451) 评论(0) 推荐(0) 编辑

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

posted @ 2023-02-14 17:27 漫思 阅读(1255) 评论(0) 推荐(0) 编辑

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

posted @ 2023-01-31 11:47 漫思 阅读(621) 评论(0) 推荐(0) 编辑

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示