CSS共0篇 第7页
CSS
排序
View Transition API —— 给 Web 动效锦上添花
? 转载请注明出处。 欢迎来到新玩具乐园，今天我们来上手把玩 View Transition API。 一、Why View Transition Transition 指的是 UI 层面的状态过渡，恰当的过渡效果能带给用户舒适感，提升产...
2年前
关于动画特效的一种简单实现及思考
设计思考&理念： 业务无关 尽量不入侵正常业务，即使有兼容问题也不影响主流程 框架无关 纯 js+css3 原生实现，不挑框架 需求背景： 有这样一个需求，某个功能控件首次消失时给一个收起到其...
2年前如何完美解决前端数字计算精度丢失与数字格式化问题？
大家好，我是木瓜太香，做前端开发经常会遇到数字计算精度丢失的问题，和数字格式化的麻烦问题，好不容易找到了可以解决这些问题的库结果用起来不够方便，例如 bignumber.js decimal.js 等编写...
2年前CSS学习-scoped or deep
Vue里的css中为什么要scoped,和deep,为什么又不用呢？ 最近的工作是修改css将网页做成一个适配版网页，前面几天写的时候，因为代码里使用了一些组件库，比如Iview,Element-UI,然后当我想要改变...
2年前CSS实现0.5px的边框的两种方式
方式一 <style> .border { width: 200px; height: 200px; position: relative; } .border::before { content: ''; position: absolute; left:0; top: 0; width: 200%; height: 200%; bord...
2年前
CSS-元素不固定宽高等比缩放
如何处理元素的高度随宽度变化，能够根据窗口大小实现等比例缩放。 例如希望元素宽度是窗口宽度的10%,而希望元素宽高比为4/3或者19/6,常见图片或者视频的比例。仅用css处理，这里提供几种思路 1...
2年前
flex讲解
随着前端技术的不断发展和更新，flex布局成为前端布局的主流。但是仍然有很多前端新手搞不懂flex到底怎么用！！！今天我们就来好好讲讲flex布局 老规矩先上定义 什么是flex布局 布局的传统解决...
2年前
css中使用选择器如何获取到当前元素的前一个相邻节点
css中使用选择器如何获取到当前元素的前一个相邻节点？ 让人迷糊的 previous sibling 在jquery中可以直接使用 $(selector).prev() 来得到。但是直接使用css，很多地方都直接说没有提供的方法。...
2年前
如何给你的个人博客添加点赞功能
最近在重构博客，想要添加一些新功能。平时有看 Josh W. Comeau 的个人网站，他的每篇文章右侧都会有一个心形按钮，用户通过点击次数来表达对文章的喜爱程度。让我们来尝试实现这个有趣的点赞功...
2年前
css中的mask，clip，颜色混合及offset不规则运动
一. mask遮罩 1. mask-image设置遮罩使用的图像 语法:mask-image:none | <image> | <mask-source> none是默认值,表示默认无遮罩图片 <image>表示图像数据类型,包括css渐变图...
2年前
跟着MDN学习background渐变
1. 什么是background background是用于集中定义各种背景属性。例如背景的color, size, origin,size,repeat等。其中的属性顺序可以按任意顺序放置。 参数说明实例background-attachment决定背景...
2年前
标签页的打开控制与跨标签页通话
这是每一个音乐网站都会实现的功能，快来看看自己会不会做！ 我们看下图这个效果，在首次点击播放音乐时，打开了一个新的标签页并在新的标签页中播放音乐。 再次切换音乐时，并没有打开新的标签...
2年前
2023-07-12 重新认识CSS的包含块、盒模型以及定位
前言 之前在开发的时候查阅MDN文档的CSS这块知识时，发现文档更新了，而且有很多新的点，像新增了包含块、块盒什么的，仔细阅读后发现确实过去的一些概念模糊不清，现在重新阅读，理解这块的知...
2年前
css中的网格布局，你学会了吗
相信很多前端同志对弹性盒（Flex）布局很熟悉，但是对于网格（Grid）布局很陌生，甚至在项目中从来没有用到过。今天就带大家学习一下网格布局是如何玩的。 如果你懒的动手写代码，或者本地创建...
2年前
别担心！css渐变是可以做到的
=== 本文作者为 360 奇舞团前端开发工程师 一、前言 以往，如果提到渐变色，你是不是会马上觉得实现起来很麻烦，很复杂，拓展性也得不到保证呢？ 不要担心，这篇文章会介绍给你一些实现方法。不...
2年前
一直在用的标准盒模型和替代（IE）盒模型到底怎么区分的？
从一道面试题讲起：经常在面试过程中面试官会提问，标准盒模型和怪异盒模型的区别是什么？ 这里提到的怪异盒模型用官话来讲就是替代盒模型。那到底什么是标准盒模型？什么是替代盒模型呢？我们...
2年前
TinyNG——开源Angular组件库，助力Web应用快速开发！
TinyNG 是基于 Angular + TypeScript 的前端 UI 组件库，旨在为开发人员带来更高效的开发体验和统一的视觉交互风格。TinyNG 已经在华为内部使用四年，支撑数百个企业产品，拥有强大的稳定性和...
2年前
实现抛物线跳跃交互底部导航栏???
专注于目标，全世界都会给你让路 写在最前 狠久没更新了，写了几篇草稿，感觉一般就没想着发布，厦门的夏天是真热啊，上个月本以为是巅峰，想着能否挑战一年不开空调，没想到仅仅只是开始，听说...
2年前
CSS 竖版圆角阴影页签栏
目标 使用纯css实现一个带有圆角阴影的页签效果，上一个页签覆盖下一个页签，激活的页签视觉上处于最高位。 主要思路 主要内容使用flex布局实现左边竖版页签栏，右边内容区域。 页签的文字排版...
2年前常用组件?文本省略（支持单行/多行，提示自适应）
✨背景 哈喽，我是JLong?，日常开发中，我们常常会遇到文本省略场景，业界常见UI库如Elment-ui中el-table提供show-overflow-tooltip属性支持内容过长时候省略显示tooltip，但经常有一些场景用户...
2年前