CSS共0篇 第5页
CSS
【译】通过JavaScript函数的想法来编写更好的CSS-五八三

【译】通过JavaScript函数的想法来编写更好的CSS

原文:# Write Better CSS By Borrowing Ideas From JavaScript Functions 网站布局的许多问题,例如不必要的副作用、痛苦的更新和脆弱的代码,当我们没有像编写 JavaScript 函数时那样小心翼翼...
admin的头像-五八三admin2年前
0180
完美掌握多行文本修剪技巧:CSS中的实用指南-五八三

完美掌握多行文本修剪技巧:CSS中的实用指南

微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。 本文 GitHub github.com/qq449245884… 已收录,有一线大厂面试完整考点、资料以及我的系列文章。 快来免费体验Chat...
admin的头像-五八三admin2年前
0210
只会用插件可不行,这些前端动画技术同样值得收藏-CSS篇-五八三

只会用插件可不行,这些前端动画技术同样值得收藏-CSS篇

目录 前言 Transition 属性 简写 进阶用法 Animations @keyframes关键帧 from&to animation动画 属性 简写 进阶用法 贝塞尔曲线(Bezier Curve) 总结 前言 实现动画效果是前端提升用户体验的...
admin的头像-五八三admin2年前
0170
CSS公共样式的引入使用-五八三

CSS公共样式的引入使用

一、前言 在开发的过程中,往往会使用大量的重复性的CSS样式来美化页面,但是如果每个页面都重复多次CSS样式,不仅浪费时间和精力,而且在样式修改时也会很麻烦。因此,我们需要将CSS样式设为公...
admin的头像-五八三admin2年前
0170

关于CSS 打印你应该知道的样式配置

昨天在做一些打印的需求,遇到了一些小坑,记录分享一下。 CSS 打印分页功能 需求: html 在一个区域显示数据,当放不下时,自动第二页存放,打印 你可以使用 CSS 的分页属性来实现这个功能。CS...
admin的头像-五八三admin2年前
0100

React组件设计之性能优化篇

我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。 本文作者:空山 前言 由于笔者最近在开发中遇到了一个重复...
admin的头像-五八三admin2年前
0220
css-让滑动更加的丝滑-五八三

css-让滑动更加的丝滑

前言:自己本身对css 涉足不深,所以对css的某些属性有时也说不清楚原理,可能有些属性都不知道, 可能三年前你对这个功能很熟悉, top↑ (脑补。。。 到顶部, enenen) 此时你大脑是不是已经...
admin的头像-五八三admin2年前
0150
媒体查询,响应式设计?帮帮我!-五八三

媒体查询,响应式设计?帮帮我!

原文地址: engineering.kablamo.com.au/posts/2023/… 什么是媒体查询? 媒体查询是一种 CSS 语言特性,它允许作者根据设备或窗口的特性有条件地应用 CSS 规则来查看应用程序。最常见的情况是...
admin的头像-五八三admin2年前
0220
CSS&UI的最新动态:I/O 2023更新-五八三

CSS&UI的最新动态:I/O 2023更新

过去的几个月迎来了Web UI的黄金时代。新的平台功能已经随着跨浏览器的采用而落地,支持比以往更多的 Web 功能和自定义功能。 以下是最近或即将推出的 5 个最令人兴奋和最具影响力的功能,我觉...
admin的头像-五八三admin2年前
0150

CSS使用JS变量

一、前置知识点 JS设置CSS变量 通过document.documentElement.style.setProperty()方法将变量设置为CSS变量。 例如下面的用法: document.documentElement.style.setProperty('--myColor', 'pin...
admin的头像-五八三admin2年前
030
基于原生js和css写出的炫酷登录页面-五八三

基于原生js和css写出的炫酷登录页面

效果展示页面 html部分 这里是基本的html页面和一些基本的class设置,这样的效果实际上是分了三个部分来完成的,一个是注册页面在右侧,一个是登陆页面在左侧,另一个就是遮盖部分,在注册和登...
admin的头像-五八三admin2年前
0150
深入了解Flex布局:构建灵活响应式布局的利器-五八三

深入了解Flex布局:构建灵活响应式布局的利器

原文合集地址如下,有需要的朋友可以关注 本文地址 合集地址 Flex布局(Flexible Box Layout)是CSS3中引入的一种强大的布局模型,它为开发人员提供了一种简单而灵活的方式来构建现代网页布局。...
admin的头像-五八三admin2年前
070
交互设计的隐性细节-五八三

交互设计的隐性细节

本文译者为 360 奇舞团前端开发工程师 原文标题:Invisible Details of Interaction Design 原文链接:rauno.me/craft/inter… 译者:Dorothy 设计给人的感觉似乎没有任何科学依据——只有感觉...
admin的头像-五八三admin2年前
0100

CSS 工程化技术方案指北

Those who fail to learn History are doomed to repeat it.(那些不学习历史的人注定会重蹈覆辙。) ———温斯顿·丘吉尔 伴随着现代 web 框架的发展,css 也出现了各种各样的解决方案。如何决...
admin的头像-五八三admin2年前
0180
milligram css 源码浅析-五八三

milligram css 源码浅析

一、前言 milligram 是我在 20 年接触并使用的一个 CSS 库,他的出现时间已经无法溯源了,根据 npm 上的发布时间最早是 2015 年,而在国内名气起来的时间大概就是 2020 年了,同时 milligram 最...
admin的头像-五八三admin2年前
0150
CSS 滚动驱动动画终于正式支持了~-五八三

CSS 滚动驱动动画终于正式支持了~

欢迎关注我的公众号:前端侦探 在最新的Chrome 115中,令人无比期待的CSS 滚动驱动动画(CSS scroll-driven animations)终于正式支持了~有了它,几乎以前任何需要JS监听滚动的交互都可以纯 CSS ...
admin的头像-五八三admin2年前
080
svg引用-五八三

svg引用

最近官网整体更新风格,其中导航栏引入了大量的svg的小图标,直接在项目中使用了ui提供的svg,发现网络请求面板中会有大量的图标资源在请求,因此本文主要针对这种情况,减少svg图片请求 1、svg...
admin的头像-五八三admin2年前
0200
你为什么应该使用transform?-五八三

你为什么应该使用transform?

你或许听过别人说,transform 的性能更好,它不会触发重排,请使用 transfrom 来替代 position(left/right/top/bottom) 。 可他们之间的区别到底是什么?它为什么可以不触发重排呢?还有为什...
admin的头像-五八三admin2年前
050
【CSS第五天】边框圆角、盒子阴影、浮动布局和Flex布局-五八三

【CSS第五天】边框圆角、盒子阴影、浮动布局和Flex布局

边框圆角 border-radius 属性用来设置元素的外边框为圆角。可以设置多个方位的属性值,属性值可以是px、百分比形式的圆角半径 记忆口诀:从左上角开始顺时针赋值,没值看对角 实现正圆头像 给方...
admin的头像-五八三admin2年前
030
带你全面了解flex响应式布局-五八三

带你全面了解flex响应式布局

弹性盒子是一种用于按行或按列布局元素的一维布局方法,元素可以膨胀以填充额外的空间,收缩以适应更小的空间,适用于任何元素上,如果一个元素使用了flex弹性布局(以下都会简称为:flex布局)...
admin的头像-五八三admin2年前
020