自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(8)
  • 收藏
  • 关注

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

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除