「已注销」-CSDN博客

原创用CSS 实现”干饭人“的叉子 [动画演示] [#8持续更新中.....]

题目图案本文是 #8 Forking Crazy，实现一个叉子。主要使用的属性是: flex border-radius box-shadow 解决方案动画演示解决方案步骤主要解决思路是，用三个div分别表示叉头，叉身，叉柄，然后用 flexbox 排成列，再使用box-shadow复制叉尖，最后使用border-radius弯曲叉身。 1. body 使用 display:flex，创建三个div，然后排成一列，然后居中 2. 使用box-shadow复制叉尖这里先使用border-r

2021-01-20 21:17:32 238

原创用CSS 实现多片树叶 [动画演示] [#7持续更新中.....]

题目图案本文是 #7 Leafy Trail，实现多片树叶。主要使用的属性是: flex border-radius box-shadow CSSBattle 是一个使用 HTML 和 CSS 实现指定图案，并进行实时预览和对比的网站。具有很强的趣味性和游戏性。我仅仅选择实现 ~100%的还原，不关注减少代码数。但是只要做的多，基本可以达到全球前 100 名. 很多减少代码数的 trick，在日常工作实践中，都是不值得提倡的。解决方案动画演示解决方案步骤主要解决思路就是使用borde

2021-01-19 19:08:45 547

原创用CSS 实现彩色圆盘 [动画演示] [#6持续更新中.....]

题目图案本文是 #6 Missing Slice，实现彩色圆盘。主要使用的属性是: flex border-width border-color transform:rotate CSSBattle 是一个使用 HTML 和 CSS 实现指定图案，并进行实时预览和对比的网站。具有很强的趣味性和游戏性。我仅仅选择实现 ~100%的还原，不关注减少代码数。但是只要做的多，基本可以达到全球前 100 名。很多减少代码数的 trick，在日常工作实践中，都是不值得提倡的。解决方案动画演示

2021-01-18 19:51:21 505

原创用CSS实现一个方块 [动画演示] [持续更新中.....]

CSSBattle 是一个使用 HTML 和 CSS 来实现目标图案，并实时预览和对比符合程度的网站。具有很高的趣味性和游戏性。我仅仅选择实现图案 ~100%的还原，不关注减少代码数。但是只要做的多，基本可以达到全球前 100 名。题目图案（#1 Simply Square）使用 HTML/CSS 实现以下图案。解决方案动画演示解决方案步骤直接给div 设置 absolute,并且设置 width and height。 position: absolute; top: 0; left

2021-01-17 22:25:26 387

原创用CSS实现酸雨图案 [动画演示] [#5持续更新中.....]

CSSBattle 是一个使用 HTML 和 CSS 实现指定图案，并进行实时预览和对比的网站。具有很强的趣味性和游戏性。我仅仅选择实现 ~100%的还原，不关注减少代码数。但是只要做的多，基本可以达到全球前 100 名。很多减少代码数的 trick，在日常工作实践中，都是不值得提倡的。题目图案使用 HTML/CSS 实现以下图案。主要使用的属性是: flex transform translateY translateX 解决方案动画演示解决方案步骤 1. body 使用 d

2021-01-17 22:22:41 207

原创用CSS实现上下颠倒的图案 [动画演示] [#4持续更新中.....]

CSSBattle 是一个使用 HTML 和 CSS 实现目标图案，并进行实时预览和对比的网站。具有很强的趣味性和游戏性。我仅仅选择实现 ~100%图案的还原，不关注减少代码数。但是只要做的多，基本可以达到全球前 100 名。很多减少代码数的 trick，在日常工作实践中，都是不值得提倡的。题目图案使用 HTML/CSS 实现以下图案。主要使用的CSS属性是: flex transform translateY 解决方案动画演示解决方案步骤 1. 使用 flex，把三个正方形

2021-01-17 22:21:55 1176

原创用CSS实现按钮图案 [动画演示] [#3持续更新中.....]

CSSBattle 是一个使用 HTML 和 CSS 来实现目标图案，并实时预览和对比符合程度的网站。具有很高的趣味性和游戏性。我仅仅选择实现图案 ~100%的还原，不关注减少代码数。但是只要做的多，基本可以达到全球前 100 名。题目图案使用 HTML/CSS 实现以下图案。解决方案动画演示解决方案步骤 1. 使用 display:flex，把一个 300 X 150 的长方形居中 2. 创建一个 250 X 250 正方形。并使用 border-radius: 50%,把正方形变成圆

2021-01-17 22:19:30 270

原创用CSS实现康乐球 [动画演示] [#2持续更新中.....]

CSSBattle #2 Carrom [动画演示] [持续更新中.....]题目图案（#2 Carrom）解决方案动画演示解决方案步骤Source Code CSSBattle 是一个使用 HTML 和 CSS 来实现目标图案，并实时预览和对比符合程度的网站。具有很高的趣味性和游戏性。我仅仅选择实现图案 ~100%的还原，不关注减少代码数。但是只要做的多，基本可以达到全球前 100 名。题目图案（#2 Carrom）使用 HTML/CSS 实现以下图案。解决方案动画演示

2021-01-17 22:16:14 233

weixin_54679694的博客