- 博客(24)
- 收藏
- 关注
RSS订阅
原创 CSS——网格布局（display: grid）之下篇
前面我们介绍了网格布局的基础的创建以及一些比较基础的属性，下面我们将介绍网格布局的剩余部分，还将结合实例来进行细致的讲解（图文并茂，生动形象有内涵）。
2024-09-21 18:15:05
1183
原创 CSS——网格布局（display: grid）之上篇
CSS网格布局（CSS Grid Layout）是一种用于创建复杂网页布局的系统，它允许开发者以二维系统（行和列）来控制元素的布局。跟 Flexbox 类似，网格布局也是作用于两级的 DOM 结构。设置为 display: grid 的元素成为一个网格容器（grid container）。它的子元素则变成网格元素（grid items）。下面将详细介绍网格布局：
2024-09-16 23:33:40
3326
2
原创 CSS——弹性盒子布局（display: flex）
Flexbox或者是弹性布局，它的全称叫做弹性盒子布局，那么它到底该如何实现呢？从我们熟悉的 display 属性开始。给元素添加 display: flex，该元素变成了一个弹性容器（flex container），它的直接子元素变成了弹性子元素（flex item）。那么我们该如何具体地操作使用呢？下面我们来进行细致深入的学习。
2024-09-14 13:04:57
4456
原创 CSS——文字渐入效果
昨天制作了文字的打字机效果，然后我想到有些网页的文字效果是平滑渐入的，我就去思考这样的实现方式，其实就把之前的 steps() 函数去掉即可，但是我想换种实现方式。之前是使用伪元素遮住父元素，这次我选择使用父元素占位，然后通过逐步显示伪元素来实现这个效果，同时还用到了响应式布局，使得在缩放页面的时候也能够保证文字不会加载到屏幕之外。
2024-10-07 23:36:42
2230
原创 CSS——文字打字机效果
本文通过纯 CSS 实现文字的打字机效果，然后借助 JS 实现了扩展。基本思路：使用伪元素覆盖原文字，并且使用伪元素模拟闪烁的光标效果。
2024-10-06 23:37:55
2527
原创 3个好看的 button动画效果
第一个button的效果为：点击按钮会有光圈的效果；第二个button的效果为：鼠标悬停会有波浪效果；第三个button的效果为：鼠标悬停会有光晕及渐变的效果。
2024-08-17 12:53:28
752
原创 一只加载中的小飞猪
基于 SVG 的加载中的小飞猪，带有彩虹拖尾，动画效果十足，全部动画使用 CSS3 实现，算是对本人博客前面的内容的强化，个人认为还是很锻炼动手能力的。
2024-08-15 21:46:36
450
原创 深入解析SVG 标签的 viewBox属性（超详细）
相信小伙伴们在学习svg标签的viewBox属性时候，无论是看w3cschool还是MDN的官方文档，都是一头雾水。我当时也是尝尽了苦头，绕了很大的弯子才弄懂其中的奥秘。下面我将我的探究成果分享给大家。
2024-08-15 01:14:41
3978
2
原创 CSS3——背景与渐变
CSS3的渐变功能让网页设计变得更加生动和有趣。你可以使用`linear-gradient`来创建从上到下或任意角度的渐变效果，甚至还能设置颜色的停顿点，让渐变更加丰富多彩。如果想要更立体的渐变效果，`radial-gradient`是你的好帮手，它以椭圆形或圆形为中心，向外扩散颜色。而且，还有`repeating-linear-gradient`和`repeating-radial-gradient`，它们可以创建重复的渐变图案，让你的设计元素更加独特。不仅如此，渐变的颜色节点还可以不均匀分布。
2024-08-11 22:28:32
887
原创 CSS3 边框（包含border-radius、border-image与box-shadow）
本文介绍了CSS3边框的使用，涵盖了border-radius、border-image以及盒子阴影，其中重点讲述了border-image以及盒子阴影部分，在关键部分附有图片支持，易于理解。
2024-08-10 17:53:33
1489
原创 HTML5 地理定位
H5的地理定位通过调用 Web Geolocation API 实现，这是一个浏览器提供的、用于获取用户当前位置信息的API。Web Geolocation API允许网页在用户同意的情况下访问其地理位置，以便提供基于位置的服务，例如地图显示、位置搜索等。
2024-08-08 23:45:45
1040
原创 HTML5 拖放（附带源码及动画演示）
拖放是一种常见的特性，即抓取对象以后拖到另一个位置，在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。实例及代码如下：
2024-08-08 23:38:27
1341
原创 HTML5 SVG，一篇文章就够了（超全超详细，附代码演示）
SVG，全称为Scalable Vector Graphics（可缩放矢量图形），是一种基于XML的矢量图形格式。它被设计用来不受分辨率限制地描述二维图形，能够在任何尺寸下都保持清晰，是现代网页设计和图形应用中不可或缺的一部分。 SVG 与 Canvas 的区别：SVG 基于 XML 而 Cnavas 基于 JavaScript……
2024-08-07 21:37:33
4761
原创 Git和GitHub：开启你的开源之旅（入门级干货教程）
Git是一个免费的开源的。版本控制系统是一种文件，以便将来查阅特定版本修订情况的系统。分区工作区（git add）➡暂存区（git commit）➡本地库（生成历史版本 git push）➡远程库代码托管中心是基于网络服务器的远程代码仓库，一般简称为“远程库”。局域网：GitLab互联网：GitHub、Gitee（码云）
2024-08-06 21:40:51
1556
3个好看的 button动画效果
2024-08-17
一只加载中的带有彩虹拖尾的小飞猪
2024-08-15
PC端 html + css + 原生js 实战-手机商城
2024-08-07
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人