首页IT科技html心形(学习css3,使用代码实现一根心爱的二踢脚)

html心形(学习css3,使用代码实现一根心爱的二踢脚)

时间2025-05-01 21:42:50分类IT科技浏览4146
导读:2023春节快到了,虽然还在上班,但心情早已开始激动,感叹2022终将过去,喜迎2023兔年吧。让我以激动的心情,利用所学css3代码知识,实现一根心爱的二踢脚吧。...

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

目录

1         、实现思路 

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

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

4       、引火线(炮蔫儿)的实现 

5                、css书写顺序说明 

6         、完整源代码

7     、结语:

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>

7            、结语:

吉祥的兔年终归还是来了   ,大家在2022年真是艰苦卓绝的一年            ,疫情               ,工作     ,小洋人         ,希望在这个喜庆的二踢脚的点燃下                ,喜迎2023       ,点燃你      ,温暖我   。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
python切片的具体操作方法(python切片中内存的注意事项) teradata如何导入数据(Teradata中如何备份和恢复数据)