CSS3实现一根心爱的二踢脚示例代码

ID:15956 / 打印

2023春节快到了，虽然还在上班，但心情早已开始激动，感叹2022终将过去，喜迎2023兔年吧。让我以激动的心情，利用所学css3代码知识，实现一根心爱的二踢脚吧。

1、实现思路

通过布局div实现主体区域，画出圆柱形；

利用before after伪类封填圆柱形的顶部和底部；

并且添加阴影效果，使效果更加真实；

添加一根引火线（不知道你们咋叫，我们叫炮蔫儿），并且做出transform旋转效果，更利于小伙伴去引燃。

2、实现二踢脚的主体圆柱部分

这里主要是布局一个DIV元素，根据现实的二踢脚设置其宽高，并且利用css3的box-shadow属性添加阴影效果。

为了增添节日气氛，居中布局2023字样，并且设置为大红色。代码如下：

 <!-- HTML部分 --> <div class="ertijiao">         2<br/>         0<br/>         2<br/>         3 </div>   // css部分 * {    margin: 0;    padding: 0; } .ertijiao {    position: relative;    top: 74px;    margin: 100px auto;    box-shadow: -1px 56px 5px #888888;    width: 50px;    height: 180px;    text-align: center;    background-color: #c6cd97;    font-size: 30px;    color: red;    font-weight: bold;                  }

3、实现顶部和底部封口部分

二踢脚是圆柱形的，所以为了增加实体特效，进行顶部和底部的椭圆形布局，这里采用的before 和 after的伪类，并且通过border-radius设置原型弧度，然后再利用宽高设置形成最终的椭圆形状。代码如下：

 .ertijiao:before {    position: absolute;    top: -10.5px;    z-index: 1;    height: 20px;    width: 100%;    content: '';    display: block;    border-radius: 50%;    background-color: #ceb49b; }   .ertijiao:after {    position: absolute;    bottom: -10px;    height: 15px;    width: 100%;    border-radius: 50%;    content: '';    display: block;    background-color: #1d120e; }

4、引火线（炮蔫儿）的实现

这里比较简单，采用一个DIV元素，对其进行绝对定位。关键是要有一个角度旋转，这里旋转了30度，更有利于小伙伴去引燃火热的2023年。代码如下：

 <!-- html部分 --> <div class="ertijiao">     2<br/>     0<br/>     2<br/>     3     <div class="pao-nian-er"></div> </div>   // css部分 .pao-nian-er {    position: absolute;    left: 44px;    bottom: 36px;    width: 40px;    height: 4px;    background: #616044;    transform: rotate(30deg);    box-shadow: 4px 2px 5px #000044; }

最终实现效果如图：

5、css书写顺序说明

很多小伙伴其实对于css的书写顺序并不是太敏感，想到哪里就写到哪里，其实这是不太合适的。其实顺序应该大致是这样子的：

△ 首先书写的是外部定位的属性样式，例如：

position，overflow， float等

top left margin-top margin-left 等

△ 然后是表框相关的，例如：

border border-radius 等

△ 然后是内部填充或者内部布局相关的，例如：

width height 等

display padding background等

然后是内部字体相关的

整体是一个由外而内的过程

6、完整源代码

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>我心爱的烟花</title>     <style>         * {             margin: 0;             padding: 0;         }         .jg {             width: 468px;             height: 462px;             background: url(./jinggai.png) no-repeat;         }         .ertijiao {             position: relative;             top: 74px;             width: 50px;             height: 180px;             margin: 100px auto;             background-color: #c6cd97;             font-size: 30px;             color: red;             font-weight: bold;             text-align: center;             box-shadow: -1px 56px 5px #888888;         }         .ertijiao:before {             position: absolute;             content: '';             display: block;             height: 20px;             width: 100%;             border-radius: 50%;             top: -10.5px;             z-index: 1;             background-color: #ceb49b;         }           .ertijiao:after {             position: absolute;             content: '';             display: block;             height: 15px;             width: 100%;             border-radius: 50%;             bottom: -10px;             background-color: #1d120e;         }         .pao-nian-er {             position: absolute;             left: 44px;             bottom: 36px;             width: 40px;             height: 4px;             background: #616044;             transform: rotate(30deg);             box-shadow: 4px 2px 5px #000044;         }       </style> </head> <body>     <div class="jg">         <div class="ertijiao">             2<br/>             0<br/>             2<br/>             3             <div class="pao-nian-er"></div>         </div>     </div> </body>