- 博客(20)
- 收藏
- 关注
RSS订阅原创 只用一个 HTML 元素可以写出多少形状？——不规则图形篇（序）
您有没有想过一个问题，如果我们只用一个 div 元素，一共可以写出多少种形状呢？
2024-08-26 21:37:02
1024
原创 只用一个 HTML 元素可以写出多少形状？——三角形与梯形篇
您有没有想过一个问题，如果我们只用一个 div 元素，一共可以写出多少种形状呢？
2024-08-02 17:02:19
1099
1
原创 旋转中的图片视觉差效果
Hello，亲爱的宝子们？最近我一个前端架构师却临时顶替产品经理的工作，导致最近一周实在太忙了，都没有来得及更新文章。在这里想大家道歉了！也想厚颜无耻的问问大家想我了吗？(●'◡'●)今天给大家带来一个非常简单，但是效果却相当炸裂的旋转图片视觉差特效。
2024-07-19 18:44:33
1356
原创 使用滤镜实现文字根据动画图片的效果
上周写了一篇文字智能适配背景的文章，其中涉及到了色彩与滤镜方面的知识，也提到了直接在CSS上使用滤镜。今天，我们趁热打铁，使用CSS的滤镜写相对来说比较炸裂的文字根据动画图片的特效吧！
2024-07-11 19:24:33
1065
原创 文字来回渐变下划线特效
下划线（underscore）是一种特殊符号，通常用于强调、标记或表示缺失的文字。它是一条水平线，位于文本的底部，与字母和数字等字符平齐。下划线在不同的领域和场景中有不同的用途，如书写、编程、表格制作等。
2024-07-08 20:54:23
1292
原创 写个时钟（进阶篇）
在“写个时钟（行为篇）”中，我们通过JavaScript动态创建的时针、分针和秒针，并直接在JavaScript中通过控制行内样式的transform 属性，设置rotate的值，实现指针的旋转。这样的方式，对于DOM的控制消耗较大，若放到大项目中，对项目性能具有一定的影响，也让JavaScript代码较多，降低了可读性。而且，设置实时时间的setRealTime函数，我们使用了递归调用，每隔一秒钟调用一次，那么每隔一秒钟就会运行整个函数一次，感觉简直是资源的浪费。
2024-06-30 17:07:38
993
原创 写个时钟（行为篇）
通过对样式篇的源代码进行观察，我们会发现，只用一个div 元素做表盘，并使用对应的before和after两个伪元素做时针和分针，那么一共只能是三个元素。需要显示秒针和表盘上的刻度，我们需要更多的元素来展示。那么今天，我们就把秒针和刻度显示出来，并且让时钟与真实的时间同步。
2024-06-26 22:19:38
1061
原创 写个时钟（样式篇）
最近总是感叹，时间过的好快啊！似乎随着地球自转速度的加快，咱们的时间也越来越快了。曾经，出门需要“伸手要钱”（伸，谐音身，指身份证；手，指手机；要，谐音钥，指钥匙，钱，指钱包）。现如今，只需要一部手机即可出门，无论是支付还是看时间，都是手机搞定。想到这里，突然好怀念以前的钟表，决定用前端写一个即将成为历史的时钟。时钟是一个典型的案例，我将会根据不同技术架构使用最基础的HTML和CSS构建一个时钟，只使用一个 DIV 元素，并使用CSS3 动画实现时钟走动的效果；通过。
2024-06-25 13:41:59
1197
原创 【欧洲杯】用纯前端写一个滚动的足球（下）
怎么样？正五边形简单吧？那么今天我们继续，把整个滚动的足球写出来吧。一个传统足球表面有12 个正五边形。为了便于理解，我们使用地球模型来做讲解。最简单的，我们在南极和北极各放一个正五边形。这两个五边形从正常的屏幕主视角（也叫做前视角）看上去，都是几乎处于水平位置。即：这两个正五边形围绕X轴分别向上或向下旋转90deg。然后我们需要在北半球和南半球的相同维度各放置五个正五边形。北半球的五个应该放在北纬 30deg的地方，同样南半球。
2024-06-24 10:09:36
816
原创 【欧洲杯】用纯前端写一个滚动的足球（上）
今年的欧洲杯已经开始啦~~~~~~~~~~~~~~~连续两天晚上被男朋友凌晨三点起来看球给吵醒，好困啊！各位前端的宝子们，今天我突发奇想，决定用纯前端写一个滚动着的足球出来。怎么样？够刺激吧？开整！由于篇幅较长，我根据内容阶段，分为了上、下两篇文章呈现。今天我们重点探讨足球上的正五边形是如何写出来的。
2024-06-21 18:26:03
1236
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人