CSS

• 站长1年前CSS
  UnoCSS给了我一个不用tailwindcss的理由相同的原由&前言如果你没有听说过或者，请先return先去了解一下😝。书接上回之前我写过一篇文章，极力推荐使用来提升开发效率和体验，尤其是样式代码的体验会有质的提升。当然样式代码打包体积的减少也可以起到优化我们整体前端项目的作用。但是为什么有这篇文章了呢？因为托尼老师给了我不用的理由，无法拒绝的理由，就是我们今天的主角为什么我换到了UnoCSS和都是原子化CSS模式实现的一种，为什么现在我更推荐
  • 353
  • 0
  • 0
• 站长2年前JavaScriptNode.js
  前端食堂技术周刊第 64 期：Node.js 19、Interop 2022、SvelteKit 1.0本期摘要大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。技术资讯1.2.3.Svelte也有了自己的元框架，SvelteKit发布1.0，并提供了。下面我们来看技术资料。技术资料1.衡量和优化网站速度的方式一直在变化：新的标准、新的工具、新的衡量指标。本文整理了2022年Web性能方面的变化：2.经过多年的稳定统治，Node.js仍然是最受欢迎的JavaScript
  • 682
  • 0
  • 0
• 站长2年前VueHTML
  2022前端面试总结，看完弄懂，工资少说加3K前言文章涉及的内容可能不全面，但量很多，需要慢慢看。来源于各个地方，我花了很长的时间整理，希望对大家有帮助。前端目录Html相关1html语义化意义：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。注意：1.尽可能少的使用无语义的标签div和span；2.在语义不明显时，既可以使用div或者p时，尽量用p,因为p在默
  • 723
  • 0
  • 0
• 站长2年前CSS
  前端工作中常用Css知识点整理1.1文字溢出省略号:文字单行溢出:多行文字溢出:1.2css变量：CSS变量又称CSS自定义属性，通过在中自定义属性与函数组成，用于引用自定义属性。谈到为何会在中使用变量，以下使用一个示例讲述。1.3渐变：渐变分为、，这里笔者直接记录的使用方式，也是为了使用的时候更加的直观，这里说下，在使用线性渐变的时候，使用以及去控制渐变，会更加的灵活使用方式:边框渐变:有个的属性，类似也有个一样,通过为其设
  • 435
  • 0
  • 0
• 站长11天前CSS
  纯css实现无限循环滚动logo墙在许多网站的合作伙伴一栏，常常会看到一排排无限地循环滚动的logo墙。 不久前，接到一一、需求在许多网站的合作伙伴一栏，常常会看到一排排无限地循环滚动的logo墙。不久前，接到一个类似的需求。需求如下：1、无限循环滚动；2、鼠标hover后，暂停滚动，鼠标离开后，继续滚动；3、支持从左往右和从右往左滚动；4、滚动速度需要可配置。简单动画，我们先尝试只使用css实现。二、实现1、marquee标签说到无限循环滚动，很久以前marquee标签可以实现类似的功能，它可以无限循环滚动，并且
  • 8
  • 0
  • 0
• 站长11天前CSS
  常见呼吸灯闪烁动画最近在需求里遇到了一个手指引导交互的动画需求。这篇文章就来讲讲如何CSS实现这个动画，如下图所示： 简最近在需求里遇到了一个手指引导交互的动画需求。这篇文章就来讲讲如何CSS实现这个动画，如下图所示：简单分析了一下效果，是一个手指移动到某处位置，然后会触发呼吸灯闪烁的效果，所有实现整个动画可以分两步：呼吸灯闪烁动画这里介绍下我遇到过得几种呼吸灯闪烁动画第一种效果第二种效果第三种效果小手移动动画完整动画代码
  • 10
  • 0
  • 0
• 站长11天前CSS
  h5 移动端适配最佳实践移动端适配的方案需要根据实际的业务场景将h5活动页、落地页在大小屏手机上要求展示大小屏无差异，那移动端适配的方案需要根据具体的业务场景进行选择，工作中接触最多的是一些h5活动页、落地页等，这些页面在大小屏手机上的展示要求大小屏无差异，那么就针对以上要求进行项目整体的适配是最合适不过的。如果是大屏手机展示更多的内容，并不着重于放大展示的话，外层布局使用vw，%，flex，内层直接px的混合适配的方案更加合适。实现方案方案一：手写vw+vh方案换算vw、vh函数的实现：方案二：手写rem方案换算
  • 9
  • 0
  • 0
• 站长11天前CSS
  CSS Grid 教程：从入门到精通一，CSS Grid 基础概念 1. 什么是 CSS Grid？ CSS Grid 一，CSSGrid基础概念1.什么是CSSGrid？CSSGrid是一种强大的二维布局系统，它允许你轻松创建复杂的网页布局。与传统的布局方法相比，CSSGrid可以同时控制水平（行）和垂直（列）方向的布局。示例：想象一下，你要把页面分成多个部分，如头部、侧边栏、内容区和页脚。使用CSSGrid，你可以非常直观地定义这些部分的位置和大小，而不需要依赖浮动、定位或表格。2.CSSGrid与Flexbo
  • 10
  • 0
  • 0
• 站长11天前CSS
  建议收藏！用了这3个CSS3可视化网站，摸鱼时间直接翻倍！前言 日常开发过程中，前端程序员经常需要开发一些酷炫的特效，而大家好，我是日拱一卒的攻城师不浪，专注可视化、数字孪生、前端提效、nodejs、AI学习、GIS等学习沉淀，这是2024年输出的第32/100篇文章。前言日常开发过程中，前端程序员经常需要开发一些酷炫的特效，而这些特效大都需要编写实现。但我发现一个问题，就是很大一部分前端程序员并不擅长CSS3这门技术，所以一旦遇到复杂一点的特效，就歇菜了。。。所以，我今天就为大家带来宝藏CSS样式网站，所有特效都
  • 7
  • 0
  • 0
• 站长11天前CSS
  纠结多年终于决定彻底放弃Tailwindcss团队代价=深入成本 Tailwindcss很容易火，因为从看到它的的第一眼上图来源Fireship团队代价=深入成本Tailwindcss很容易火，因为从看到它的的第一眼就会觉得超级直观、超级简单、超级方便，所以无论是写文章出视频都很容易吸引一波流量。但是真要用在企业级应用我们需要考虑全部的复杂性，你至少要吃透官方文档的大部分内容，最好是写几个稍微复杂点的Demo，光是吃透文档就需要至少10小时以上的成本你才能彻底在企业级应用allintailwind，如果你的团队有1
  • 8
  • 0
  • 0