CSS共0篇 第11页
CSS
排序
【css动画】你不知道的css时间函数
前言 大家在写项目的时候，是不是会经常使用浏览器的查看元素来看看自己写的样式哪里有问题。在查看元素的时候，大家有没有发现一个小地方的特点。 也就是在color属性后面写了颜色样式之后，前...
2年前
CSS 实现弧边选项卡
这样的弧度的弧线选项卡你知道用 CSS 怎么做吗？ 是不是又要去找 UI 小姐姐了？ 我是渡一前端子辰老师，今天让我们一起探索这个有趣的技巧吧。 实现步骤 要实现这样的弧度弧线选项卡，我们可以...
2年前CSS3的过度
CSS3过渡是一种用于在元素状态变化时平滑过渡的效果。通过CSS3过渡，你可以定义元素在状态改变时的动画效果，如颜色、大小、位置等的平滑过渡。 属性 transition-property： 指定要过渡的CSS属...
2年前
通过css 的 scroll-snap 实现整屏滑动
前言 整屏滑动是比较常见的场景，用户只需要轻轻滑动一下，即可切换整屏的内容，对用户体验， UI排版来说是很有用的，之前我们实现这个功能需要借助一些js来实现，现在仅仅只需要两个css即可轻...
2年前CSS3新增伪类选择器有哪些
CSS3引入了许多新的伪类选择器，用于选择元素的特定状态或位置。如： :nth-child(n)：选择父元素下的第 n 个子元素。 :nth-last-child(n)：选择父元素下的倒数第 n 个子元素。 :last-child：选...
2年前
什么？CSS 能实现鼠标滚轮的横向滚动？
再次考验你的css功底，这样的横向平滑滚动效果，只用css就可以实现，想不想来挑战一下？ 看到这个效果同学们脑子里第一个想到的是什么？监听鼠标的滚轮事件吗？其实也可以实现但是非常的麻烦，...
2年前
设置table的边框，你有什么好点子?️
这篇文章和大家分享两个设置table边框的方法，一种常用的，一种更灵活的。 方法一： 在table的标签上使用border属性就可以： <table border='1'></table> 效果是每个单元格cell都有...
2年前
?️不懂就问，你知道在开发静态页面时，如何使用sass吗？
sass的概念，作用，好处 Sass，全称为'Syntactically Awesome Stylesheets'，是一种强大的样式表预处理器，为前端开发人员提供了一种更优雅、更高效的方式来编写CSS。与传统的CSS相比，Sass引入...
2年前
css层叠上下文和z-index的使用和思考
过去一段时间经常遇到线上的页面元素互相遮盖的问题，索性就总结一下吧。 正常情况下，页面元素是从左到右和从上到下渲染（x、y 维度），但因为 margin 可以写负值，还有一些定位相关的 css 属...
2年前
这样的文字环绕效果，你绝对没有见过！
图片环绕文字大家太熟悉了，这是初学css必须经历的效果之一。 但是你有没有想过让文字按照我们想要的方式进行环绕呢？ 我是渡一子辰老师，今天就来教大家实现这种奇妙的环绕方式。 下图这种效果...
2年前CSS3的动画
CSS3动画是指通过CSS3的动画属性和关键帧规则来实现网页元素的动态效果。CSS3动画可以在不使用JavaScript的情况下，通过简单的CSS代码就能创建平滑、流畅的动画效果，如淡入淡出、旋转、缩放、...
2年前
svg与图标icon
可缩放矢量图形(Scalable Vector Graphics ， SVG) ，作为一种矢量图 ，它最大的特性是可以随意放大而不失真： 矢量图是根据几何特性来绘制图形，矢量可以是一个点或一条线，矢量图只能靠软件生...
2年前
css拟态风格尝试以及css3新特性渐变使用
灵感 由于之前偶然间听到拟态风格这个词，那么什么是拟态风格呢。「新拟态」英文名Neumorphism，也有设计师称为 Soft Ui（软UI）。简单来说就是一种类似浮雕的效果，介于扁平与投影之间。俺总结...
2年前
CSS中 clip-path 的用法总结
clip-path 基本介绍 clip-path 是一个CSS属性，剪切路径，允许用不同的剪切方式创建元素的可显示区域，区域内的内容可以展示，区域外的内容则隐藏。 基本语法：clip-path: <clip-source> ...
2年前
如何使用CSS，给你的图片添加揭露动画效果？
前言 何为揭露动画效果？顾名思义，当触发某种事件后，隐匿在后面的元素会慢慢浮现出来，如下图所示： 你可能会想，我们可以使用其他元素或伪元素，实现该动画效果。 但是我们将只使用<img&g...
2年前
单标签下的日间/黑夜模式切换按钮效果
前不久，在网上看到这么一张非常有趣的图： 想必很多同学都看到这张图，是一个开发小哥被一个日间/黑夜模式切换按钮效果逼疯的视频。 其最终效果大致如下： 原完整代码在这里：Night &&...
2年前
手把手教你纯CSS实现一个望花筒特效
前言 前面介绍了那么多朴素无常的特效，这次带来一个炫酷的望花筒特效。望花筒特效是一种基于 CSS3 的特效，可以用来实现网页的动态背景效果。它是通过旋转、缩放、透明度等属性，将一组图片或...
2年前CSS3有哪些新特性
CSS3引入了很多新特性，比如： 选择器：CSS3引入了新的选择器，如伪类选择器、伪元素选择器等，使得选择元素更加灵活和精确。 边框圆角：CSS3允许通过border-radius属性为元素的边框添加圆角，...
2年前
Web 开发 7 年，一文总结 CSS 常见面试点和基础教程
结合自己多年的 web 开发经验，加上最近集中看的几本 CSS 的书籍、一些高阅读量的文章、W3C 的规范和 MDN 的教程，整理了这份应对简单面试的 CSS 基础指南。一文领进门，专精靠个人。 封面图来...
2年前
Vue3+Vite2”食用“UnoCSS
UnoCSS 是什么? CSS原子化 在前端开发中，CSS原子化（Atomic CSS）是一种设计和编写CSS样式的方法论。它的核心思想是将样式属性拆分为独立的、可重用的类名，每个类名仅定义一个样式属性。 优点...
2年前