「已注销」-CSDN博客

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

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

2021-01-19 19:08:45 549

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

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

2021-01-18 19:51:21 507

原创用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 388

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

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

2021-01-17 22:22:41 208

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

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

2021-01-17 22:21:55 1180

原创用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 CodeCSSBattle 是一个使用 HTML 和 CSS 来实现目标图案，并实时预览和对比符合程度的网站。具有很高的趣味性和游戏性。我仅仅选择实现图案 ~100%的还原，不关注减少代码数。但是只要做的多，基本可以达到全球前 100 名。题目图案（#2 Carrom）使用 HTML/CSS 实现以下图案。解决方案动画演示

2021-01-17 22:16:14 239

weixin_54679694的博客