学习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,点燃你,温暖我。
相关文章
- 微软:Windows 11的新设计不会影响性能,没有抄袭 macOS
- 微软表态称Windows 11的新设计不会影响性能
- 微软:Windows 11居中开始菜单/圆角窗口不是抄袭macOS也不影响性能
- Windows 11开始菜单即将可以隐藏“推荐”部分
- 消息称微软 Windows 11“开始”菜单将允许隐藏“推荐的项目”部分
- Windows 11圆角窗口问题多多?新版本推送解决问题
- 微软 xCloud 云游戏已支持通过 Windows 11/Windows 10 版 Xbox App 运行
- Windows App SDK 1.0.0体验工具包发布:支持WinUI 3、推送通知、窗口化...
- 任务栏功能缩水:那些Windows 11已经或即将删除的功能
- 整合 Windows 11 界面,微软教开发者如何用 WinUI/Fluent Design 升级其现有程序
- 数百名用户呼吁微软在Windows 11上重新引入任务栏位置调整选项
- 微软推Windows 11新版:修复诸多Bug 舒适了!
- 截屏更加方便快捷!Windows 11新版截屏工具来了
- 微软拟禁用 JavaScript JIT 来提高 Edge 安全性
- 微软正修复 Windows 11 圆角 UI:边角白色伪影问题没了,更好的抗锯齿效果
- 微软 Visual Studio Code v1.59 正式发布:Terminal 跨窗口移动,JS 调试实时 HTML 预览...
- 微软Teams将支持高保真音乐传输改善在线音乐内容
- 微软 Panos Panay 自曝 Windows11 全新功能:Focus Sessions,属于闹钟和时钟一部分
- 微软发布第五个累积更新,Windows 11 Build 22000.120 (KB5005188) 自带精简菜单
- 利用NLP感知世界 Facebook开源机器人开发平台