CSSBattle Batte #1

于 2023-05-12 11:47:13 发布
阅读量95 收藏
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40084198/article/details/130468065
版权

1.Simply Square

目标

在这里插入图片描述

解决方案

<div></div>
<style>
  * {
    margin: 0px;
    padding: 0px;
  }
  body {
    background: #5d3a3a;
  }
  div {
    width: 200px;
    height: 200px;
    background: #b5e0ba;
  }
</style>

2.Carrom

目标

在这里插入图片描述

解决方案

1. 使用绝对定位
  • 其实不需要body上不需要使用position: relative。当在一个元素上声明position: absolute时，它相对于它最近的非静态定位的元素定位，如果没有，就相对于html定位。
  • 如果body/html不显示声明width和height的大小，那么它的默认大小为视口的高度和宽度。如果此时四个矩形的包含块没有高度，就显示不出四个矩形了（绝对定位的元素脱离文档流）。
<div class="lt"></div>
<div class="rt"></div>
<div class="lb"></div>
<div class="rb"></div>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    background: #62374e;
    position: relative;
  }
  div {
    width: 50px;
    height: 50px;
    background: #fdc57b;
    position: absolute;
  }
  .lt {
    top: 50px;
    left: 50px;
  }
  .rt {
    top: 50px;
    right: 50px;
  }
  .lb {
    bottom: 50px;
    left: 50px;
  }
  .rb {
    bottom: 50px;
    right: 50px;
  }
</style>

3. Push Button

目标

在这里插入图片描述

解决方案

<div class="circle1 center">
  <div class="circle2 center">
    <div class="circle3 center">
      <div class="circle4 center"></div>
    </div>
  </div>
  
</div>
<style>
  * {
    margin: 0px;
    padding: 0px;
  }
  body {
    background: #6592CF;
    position: relative;
  }
  .center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .circle1 {
    width: 300px;
    height: 150px;
    background: #243D83;
  }
  .circle2 {
    width: 250px;
    height: 250px;
    background: #6592CF;
    border-radius: 50%;
  }
  .circle3 {
    width: 150px;
    height: 150px;
    background: #243D83;
    border-radius: 50%;
  }
  .circle4 {
    width:50px;
    height: 50px;
    background: #EEB850;
    border-radius: 50%;
  }
</style>

4.Ups n Downs

目标

在这里插入图片描述

解决方案

<div class="ct"></div>
<div class="lb"></div>
<div class="rb"></div>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    background: #62306D;
    position: relative;
  }
  div {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #F7EC7D;
  }
  .ct {
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 0);
    border-radius: 50% 50% 0 0;
  }
  .lb {
    left:50%;
    top:50%;
    transform: translate(-150%, 0);
    border-radius: 0 0 50% 50%;
  }
  .rb {
    right: 50%;
    top: 50%;
    transform: translate(150%, 0);
    border-radius: 0 0 50% 50%;
  }
</style>

5.Acid Rain

目标

在这里插入图片描述

解决方案

<div class="bottom"></div>
<div class="center"></div>
<div class="top"></div>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    background: #0B2429;
    position: relative;
  }
  div {
    width: 120px;
    height: 120px;
    position: absolute;
  }
  .bottom {
      background: #F3AC3C;
      border-radius: 50% 0 50% 50%;
      left:20%;
      bottom: 10%;
  }
  .center {
    background:#998235;
    border-radius: 50% 0 50% 50%;
    left: 35%;
    bottom: 30%;
    z-index: -1;
  }
  .top {
    background: #F3AC3C;
    border-radius: 50%;
    left: 50%;
    top: 10%;
    z-index: -2;
  }
  
</style>

6.Missing Slice

目标

在这里插入图片描述

解决方案

<div class="lt"></div>
<div class="rt"></div>
<div class="lb"></div>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    background:#E3516E;
    position:relative;
  }
  div {
    width: 100px;
    height: 100px;
    position: absolute;
  }
  .lt {
    background: #51B5A9;
    border-radius: 100% 0 0 0;
    bottom: 50%;
    right: 50%;
  }
  .rt {
    background: #FADE8B;
    border-radius: 0 100% 0 0;
    left: 50%;
    bottom: 50%;
  }
  .lb {
    background: #F7F3D7;
    border-radius: 0 0 0 100%;
    top: 50%;
    right:50%;
  }
  
</style>

7.Leaf Trail

目标

在这里插入图片描述

解决方案

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

<style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    background:#0B2429;
    position:relative;
  }
  div {
    width: 150px;
    height: 150px;
    background: #dd6b4d;
    border-radius:66% 0;
    position: absolute;
  }
  .left {
    background: #1A4341;
    top: 50%;
    left: 50%;
    transform: translate(-83%, -50%);
  }
  .center {
    background: #998235;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .right {
    background: #F3AC3C;
    top: 50%;
    right:50%;
    transform: translate(83%, -50%);
  }
</style>

8.Forking Crazy

目标

在这里插入图片描述

解决方案

<div class="fork-top">
  <div class="fork-hole"></div>
  <div class="fork-hole"></div>
  <div class="fork-hole"></div>
  <div class="fork-hole"></div>
  <div class="fork-hole"></div>
  <div class="fork-hole"></div>
  <div class="fork-hole"></div>
</div>
<div class="fork-body"></div>
<div class="fork-bottom"></div>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  body {
    background: #6592CF;
  }
  .fork-top {
    margin: 50px auto 0;
    width: 140px;
    height: 110px;
  }
  .fork-hole {
    float: left;
    width: 20px;
    height: 110px;
    background: #060F55;
    border-radius: 10px;
  }
  .fork-hole:nth-child(even) {
    background: #6592CF;
  }
  .fork-body {
    width: 140px;
    height: 100px;
    background:#060F55;
    margin: -10px auto 0;
    border-radius: 0 0 100px 100px;
  }
  .fork-bottom {
    width: 20px;
    height: 50px;
    background: #060F55;
    margin: auto;
  }
</style>

9.Tesseract

目标

在这里插入图片描述

解决方案

<div class="container1 center">
  <div class="container2 center">
    <div class="container3 center">
      <div class="container4 center"></div>
    </div>
  </div>
</div>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    background: #222730;
    position: relative;
  }
  .center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .container1 {
    width:400px;
    height: 150px;
    background: #4CAAB3;
  }
  .container2 {
    width: 250px;
    height: 250px;
    background: #222730;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .container3 {
    width: 150px;
    height: 150px;
    background: #4CAAB3;
  }
  .container4 {
    width: 50px;
    height: 50px;
    background: #393E46;
    border-radius: 50%;
  }
</style>

10.Cloaked Spirits

目标

在这里插入图片描述

解决方案

<div class="cloaked-small left">
  <div>
    <div></div>
  </div>
</div>
<div class="cloaked-big center">
  <div>
    <div></div>
  </div>
</div>
<div class="cloaked-small right">
  <div>
    <div></div>
  </div>
</div>


<style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    background: #62306D;
    position: relative;
  }
  .center {
     position: absolute;
     left: 50%;
     bottom: 0%;
     transform: translate(-50%, 0);
  }
  .left {
     position: absolute;
     left: 50%;
     bottom: 0%;
     transform: translate(-150%, 0);
  }
  .right {
     position: absolute;
     left: 50%;
     bottom: 0%;
     transform: translate(50%, 0);
  }
  .cloaked-small {
     width: 100px;
     height: 150px;
     background: #F7EC7D;
     border-radius: 50px 50px 0 0;
  }

  .cloaked-small > div {
     width: 100px;
     height:100px;
     background: #AA445F;
    border-radius: 50%;
    position: relative;
  }

  .cloaked-small > div > div{
     position: absolute;
     width: 60px;
     height:60px;
     background: #E38F66;
    border-radius: 50%;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }


  .cloaked-big {
     width: 100px;
     height: 250px;
     background: #F7EC7D;
     border-radius: 50px 50px 0 0;
  }

  .cloaked-big > div {
     width: 100px;
     height:100px;
     background: #E38F66;
    border-radius: 50%;
    position: relative;
  }

  .cloaked-big > div > div{
     position: absolute;
     width: 60px;
     height:60px;
     background: #AA445F;
    border-radius: 50%;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
</style>

11.Eye of Sauron

目标

在这里插入图片描述

解决方案

<div class="semicircle left">
  <div class="center">
    <div class="semicircle-top"></div>
  </div>
</div>
<div class="circle center">
  <div class="center">
    <div class="center"></div>
  </div>
</div>
<div class="semicircle right">
   <div class="center">
    <div class="semicircle-bottom"></div>
  </div>
</div>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    background: #191210;
    position: relative;
  }
  .center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .left {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-150%, -50%);
  }
  .right {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(50%, -50%);
  }
  .circle {
    width: 140px;
    height: 140px;
    background: #ECA03D;
    border-radius: 50%;
  }
  .circle > div {
    width: 100px;
    height: 100px;
    background: #191210;
    border-radius: 50%;
  }
  .circle > div > div{
    width: 50px;
    height: 50px;
    background: #84271C;
    border-radius: 50%;
  }

  .semicircle {
    z-index: -1;
    background: #ECA03D;
    width: 100px;
    height:100px;
    border-radius: 50%;
  }
  .semicircle > div {
    width: 60px;
    height: 60px;
    background: #191210;
    border-radius: 50%;
  }
  .semicircle > div > div {
    width: 100px;
    height:50px;
    background: #191210;
    position: relative;
    
  }
  .semicircle-top {
    left: -20px;
    top: -20px;
    border-radius: 50px 50px 0 0;
  }
  .semicircle-bottom {
    left:-20px;
    bottom: -30px;
    border-radius: 0 0 50px 50px;
  }
</style>

12.Wiggly Moustache

目标

在这里插入图片描述

解决方案

<div class="semicircle left">
  <div class="little-circle little-circle-left"></div>
</div>
<div class="semicircle center"></div>
<div class="semicircle right">
  <div class="little-circle little-circle-right"></div>
</div>

<style>
  * {
    margin: 0;
    padding: 0;
  }
   body {
     position: relative;
     background: #F5D6B4;
   }
  .little-circle {
    background: #D86F45;
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }
  .little-circle-left{
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(0, 50%);
  }
  .little-circle-right {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(0, 50%);
  }
  .center {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .left {
    position: absolute;
    transform: rotate(180deg) translate(130%, 0);
    top: 50%;
    left: 50%;
  }
  .right  {
    position: absolute;
    transform: rotate(180deg) translate(-130%, 0);
    top: 50%;
    right: 50%;
  }
  .semicircle {
    background: #D86F45;
    width: 100px;
    height: 50px;
    border-radius: 50px 50px 0 0; 
  }
  .semicircle::after {
    content: "";
    display: block;
    background: #F5D6B4;
    width: 60px;
    height: 30px;
    border-radius: 30px 30px 0 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
  }
</style>
HH123_3
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
cw2015_battery 电池检测芯片 I2C
01-22
发现网上找不到 cw2015 电池检测的源代码，现在补充出来。
python battle
05-09
python battle是一款双人游戏，游戏规则如下： 红色机器人 上下左右键移动，“0”让对方先走，空格键攻击 蓝色机器人 WASD移动，“P”让对方先走，“J”攻击
25个实用前端网站工具推荐
最新发布
RE_Z002的博客
04-20 356
是一个在线可自定义设计SVG图标素材的网站，帮助前端设计师找到想要的图标素材，这些图标素材都是常用图标，可以点击官方提供的素材进行二次设计，同时也可以把设计好的图标导出。
CSS-Battle
sfumato的博客
03-19 288
【代码】CSS-Battle。
css游戏代码_介绍CSSBattle-第一个CSS代码搜寻游戏
08-07 2000
css游戏代码by kushagra gour 由kushagra gour 介绍CSSBattle-第一个CSS代码搜寻游戏 (Introducing CSSBattle — the first CSS code-golfing game) If you are learning Web development or are already a professional Web develo...
6个学习CSS的免费在线游戏网站
weixin_43550766的博客
07-21 907
CSS在线学习网站
CSSBattle#2 Carrom
apple_51191048的博客
04-11 209
思路一：创建四个div，利用伪类选择器分别定位。 思路二：创建dashed边框然后使用clip-path进行剪裁。
fcboost.zip_Fuel cell converter_battery_fcboost_fuel cell batte
07-13
fuel cell and battery
ICWE-2021:PWA与其他
05-09
PWA与其他：相对于渐进式Web应用程序的UI能源效率的比较研究 储存库内容 apks：编译并签名的apk，用于在设备上进行测试 apps：被测和检测应用的源代码 工具：UIAutomator Android应用 ...start_batte
gnome-bluetooth-battery-indicator:Gnome-Shell 扩展显示蓝牙设备的电池百分比
08-03
关于 Gnome-Shell 扩展显示蓝牙设备的电池百分比 要求 蓝兹 python3（在 ubuntu 上：python3-dev） ...cp -R gnome-bluetooth-battery-indicator ~ /.local/share/gnome-shell/extensions/bluetooth-batte
cssbattle_solution:尝试在CSSBattle上进行CSS挑战
04-02
cssbattle_solution 上CSS挑战解决方案
cssBattle:我CSS战斗懒惰解决方案
03-06
cssBattle:我CSS战斗懒惰解决方案
CSSBattle-challenges:CSS Battle平台上执行的一些挑战
03-30
CSS Battle挑战 CSS Battle平台上执行的一些挑战 试战
CSSBattle-67
03-27
CSSBattle-67
css-battle-answer:CSSBATTLE的部分非最佳解决方案
05-27
CSS-battle-answer Partial non-optimal solution of 。 自己做的答案，并非最佳答案（字符数最少），如果你有更好的答案，欢迎提 PR，或者进 QQ 群一起讨论。 。 LIST Target #13 - Totally Triangle Target #14 - Web Maker Logo Target #15 - Overlap Target #16 - Eye of the Tiger Target #17 - Fidget Spinner Target #18 - Matrix Target #19 - Cube Target #20 - Ticket Target #21 - SitePoint Logo.md Target #22 - Cloud Target #23 - Boxception Target #24 - Switch
CSS-Battle-Challenges：我在CSS战斗中的解决方案:crossed_swords:
02-14
CSS之战 :crossed_swords: 我尝试完成（CSS BATTLE）挑战 提示：复制代码并将其粘贴到Css Battle网站中，因为它可能没有响应能力！
cssBattle
03-29
cssBattle
很不错实用的前端工具
qq_35876316的博客
05-08 1294
▍CSS 相关 ●1CSSBattle-在线比拼 CSS https://cssbattle.dev 在线比拼 CSS ，一个挺有趣的竞争性游戏，一共有12个级别，需要你用 HTML和 CSS 100%还原它给出的页面，然后再尽量减少代码，你也可以查看全球的排行榜，看解决方案。 ●2Learn CSS layout - 学习CSS 布局 http://learnlayout.com 在线CSS布局学习，它会一步一步引导初学者学习 CSS 基础知识，在实践中帮助初学者...
CSS 终极之战：Grid VS Flexbox
极光开发者
12-13 2134
价值 | 思考 | 共鸣简评：近些年 CSS Flexbox 在前端开发者中变得非常流行。其实并不奇怪，它能让我们更容易创建出动态布局，以及在容器中对其内容。然而城里新来了个小伙叫 CSS Grid，它有许多弹性盒的能力，有时候比弹性盒好用，有时候却不好用。作者点评了弹性盒、网格两者之间的差异，以及什么时候用哪种比较好。先来看下这节课的截屏预告：一维 VS 二维如果你想从这篇文章中学到精髓，下面的

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值