首页
归档
笔记
树洞
搜索
友言

文章栏目

Interesting People Record Interesting.

/ CSS

CSS栏目文章

css 导航栏实现缺口圆角效果

.level-item_active{ color:#333; background:#fff; position:relative; overflow:unset; &::after{ …
2024-09-097360CSS
# 缺口圆角

实现一个直击用户灵魂的 Loading 效果（附源码）

分享一个挺有意思的Loading效果，有一种直冲用户的感觉~ 原文地址 <!DOCTYPEhtml> <htmllang="en"> <head> <met…
2024-07-141.8k0CSS

纯 CSS 实现高度与宽度成比例的效果

最近在做一个产品列表页面，布局如右图所示。页面中有若干个item，其中每个item都向左浮动，并包含在自适应浏览器窗口宽度的父元素中。 item元素的CSS定义如下： .item{ float:le…
2024-03-151.7k0CSS

使用scss简化媒体查询

//https://blog.csdn.net/m0_46219714/article/details/132940786 $breakpoints:( "phone":(320px,480px), …
2023-10-291.4k0CSS

【源代码】分享一些好看的404页面

粒字404页面 <!DOCTYPEhtml> <html> <head> <title>Thepageyouwerelookingfordoesn'te…
2023-06-061.6k0CSS

nav导航栏每个子元素居中对齐，两边留边距

nav导航栏每个子元素居中对齐，两边留边距 .nav-bar{ display:flex; align-items:center; margin:0auto; width:100%; justify-…
2023-05-101.4k0CSS
# css# 导航栏

使用CSS实现微信朋友圈的九宫格图片自适应

<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-…
2022-12-292.9k0CSS

CSS实现背景跟随滑动的按钮菜单效果

通过transition过渡属性，可以将相关css属性的变化，改为一个持续一段时间的连续过程，而不是使css样式的改变立即生效，其过程按照指定的曲线速率变化。 如下，是利用transition过渡，通…
2022-10-083.2k0CSS

px rem em vh vw之间的区别到底是啥？

绝对长度pxpx是像素值，是一个固定的长度，比如我们的米，厘米一样。 相对长度为什么我们需要相对长度remem等？🤔固定长度已经不能满足我们现在的需求了。 🌰举例：比如我们在缩小我们屏幕的时候，我们不…
2022-09-272.8k0CSS

说说 CSS 3 动画以及 steps() 函数

如今CSS3动画已经非常常见，网上关于CSS3动画的介绍也不少，但大多数都没提及steps()这个函数。最近在制作miss.cat的loading动画时，尝试了一下该函数，发现还蛮实用的。 什么是动画…
2022-03-103.8k0CSS