自定义博客皮肤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,实现一个叉子。主要使用的属性是: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

空空如也

空空如也

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

TA关注的人

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