- 博客(8)
- 收藏
- 关注
RSS订阅原创 用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
287
原创 用CSS 实现多片树叶 [动画演示] [#7持续更新中.....]
题目图案本文是 #7 Leafy Trail，实现多片树叶。主要使用的属性是:flexborder-radiusbox-shadowCSSBattle 是一个使用 HTML 和 CSS 实现指定图案，并进行实时预览和对比的网站。具有很强的趣味性和游戏性。我仅仅选择实现 ~100%的还原，不关注减少代码数。但是只要做的多，基本可以达到全球前 100 名.很多减少代码数的 trick，在日常工作实践中，都是不值得提倡的。解决方案动画演示解决方案步骤主要解决思路就是使用borde
2021-01-19 19:08:45
609
原创 用CSS 实现彩色圆盘 [动画演示] [#6持续更新中.....]
题目图案本文是 #6 Missing Slice，实现彩色圆盘。主要使用的属性是:flexborder-widthborder-colortransform:rotateCSSBattle 是一个使用 HTML 和 CSS 实现指定图案，并进行实时预览和对比的网站。具有很强的趣味性和游戏性。我仅仅选择实现 ~100%的还原，不关注减少代码数。但是只要做的多，基本可以达到全球前 100 名。很多减少代码数的 trick，在日常工作实践中，都是不值得提倡的。解决方案动画演示
2021-01-18 19:51:21
562
原创 用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
438
原创 用CSS实现酸雨图案 [动画演示] [#5持续更新中.....]
CSSBattle 是一个使用 HTML 和 CSS 实现指定图案，并进行实时预览和对比的网站。具有很强的趣味性和游戏性。我仅仅选择实现 ~100%的还原，不关注减少代码数。但是只要做的多，基本可以达到全球前 100 名。很多减少代码数的 trick，在日常工作实践中，都是不值得提倡的。题目图案使用 HTML/CSS 实现以下图案。主要使用的属性是:flextransformtranslateYtranslateX解决方案动画演示解决方案步骤1. body 使用 d
2021-01-17 22:22:41
233
原创 用CSS实现上下颠倒的图案 [动画演示] [#4持续更新中.....]
CSSBattle 是一个使用 HTML 和 CSS 实现目标图案，并进行实时预览和对比的网站。具有很强的趣味性和游戏性。我仅仅选择实现 ~100%图案的还原，不关注减少代码数。但是只要做的多，基本可以达到全球前 100 名。很多减少代码数的 trick，在日常工作实践中，都是不值得提倡的。题目图案使用 HTML/CSS 实现以下图案。主要使用的CSS属性是:flextransformtranslateY解决方案动画演示解决方案步骤1. 使用 flex， 把三个正方形
2021-01-17 22:21:55
1233
原创 用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
321
原创 用CSS实现康乐球 [动画演示] [#2持续更新中.....]
CSSBattle #2 Carrom [动画演示] [持续更新中.....]题目图案（#2 Carrom）解决方案动画演示解决方案步骤Source CodeCSSBattle 是一个使用 HTML 和 CSS 来实现目标图案，并实时预览和对比符合程度的网站。具有很高的趣味性和游戏性。我仅仅选择实现图案 ~100%的还原，不关注减少代码数。但是只要做的多，基本可以达到全球前 100 名。题目图案（#2 Carrom）使用 HTML/CSS 实现以下图案。解决方案动画演示
2021-01-17 22:16:14
312
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人