CSS3实现一根心爱的二踢脚示例代码
我要评论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>
7、结语：
吉祥的兔年终归还是来了，大家在2022年真是艰苦卓绝的一年，疫情，工作，小洋人，希望在这个喜庆的二踢脚的点燃下，喜迎2023，点燃你，温暖我。
到此这篇关于CSS3实现一根心爱的二踢脚示例代码的文章就介绍到这了,更多相关css3一根心爱的二踢脚内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局，本文介绍CSS3 最强二维布局系2025-02-27- 本文介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同2025-02-27
文章介绍了如何使用CSS3实现一个雷达探测扫描的效果,包括夜色背景、蜘蛛网盘、扫描体的转动效果、尾巴阴影以及被扫描到的光点,通过HTML和CSS的配合,实现了丰富的动画效果,2025-02-21- CSS3的Flexbox是一种强大的布局模式,通过设置display:flex可以轻松实现对齐、排列和分布网页元素,它解决了传统布局方法中的对齐、间距分配和自适应布局等问题,接下来通过本2025-02-19
本文给大家介绍css3 实现icon刷新转动效果，文章开头给大家介绍了webkit-transform、animation、@keyframes这三个属性，结合实例代码给大家介绍的非常详细，感兴趣的朋友一2025-02-19- CSS3过渡属性用于实现元素从一种样式平滑过渡到另一种样式,通过设置transition-property过渡属性、transition-duration过渡时长transition-timing-function过渡函数和trans2025-02-19
- 本文介绍了如何使用CSS3创建一个简单的动态旋转加载样式,通过定义一个带有类名“loader”的HTML元素,并使用CSS样式和@keyframes规则来实现旋转动画,你可以根据需要调整样式2025-02-19
- 这篇文章主要介绍了如何使用CSS3的transition属性实现平滑的过渡动画，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友一起看看吧2025-02-13
本文介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果，感兴趣的朋2025-02-11- CSS3和SVG的结合使用为网页设计带来了创新的动态视觉效果,本文通过一个圆形进度条的动画特效示例,展示了如何利用CSS3的动画功能和SVG的矢量图形能力来创建丰富的用户交互体2024-10-24
最新评论