学习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,点燃你,温暖我。
学习css3,使用代码实现一根心爱的二踢脚相关推荐
- 推荐几份能够帮助你学习 CSS3 的实用帮助手册
今天这篇文章向大家分享几份对学习 CSS3 非常有帮助的手册,大家记得收藏起来.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多 ...
- 父亲节,程序员几条代码硬核示爱
摘要:祝所有的父亲,节日快乐! 父亲节要送什么? 对老爸的爱在心口难开怎么办? 都说父爱如山,山也需要偶尔的温情问候,与其在网上遍寻各种攻略,不如敲起手中的键盘,码出几行代码,用你最熟悉的方式表达对父 ...
- 幕客学习CSS3全面基础知识点
CSS基础 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至3 ...
- css 科技 边框_一篇文章带你学习CSS3图片边框
这篇文章我们来讲一下在网站建设中,一篇文章带你学习CSS3图片边框.本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文. 使用CSS3 border-image 属性,你可以在元素 ...
- java编程石头剪刀布图片_石头、剪刀、布!10分钟带你打开深度学习大门,代码已开源...
原标题:石头.剪刀.布!10分钟带你打开深度学习大门,代码已开源 沉沉 发自 宇宙中心 量子位 出品 | 公众号 QbitAI 深度学习技术的不断普及,越来越多的语言可以用来进行深度学习项目的开发,即 ...
- Python编程语言学习:两行代码输出根目录下所有子文件夹的绝对路径、相对路径
Python编程语言学习:两行代码输出根目录下所有子文件夹的绝对路径.相对路径 目录 两行代码输出根目录下所有子文件夹的绝对路径.相对路径 两行代码输出根目录下所有子文件夹的绝对路径.相对路径 #Py ...
- 循环神经网络matlab程序设计,神经网络及深度学习(包含matlab代码).pdf
神经网络及深度学习(包含matlab代码) 神经网络及深度学习 (包含 MATLAB 仿真) 人工神经网络(Artificial Neural Network,即 ANN ), 作为对人脑最简单的一种 ...
- java学习教程之代码块
学编程吧java学习教程之代码块发布了,欢迎通过xuebiancheng8.com来访问 java中的代码块包括下面几种: 1.普通代码块 2.构造代码块 3.静态代码块 1.普通代码块很简单看下面这 ...
- NGenerics算法库是学习的好代码
NGenerics算法库是学习的好代码 地址为: http://www.codeplex.com/NGenerics posted on 2007-04-29 22:48 黄尚 阅读(...) 评论( ...
最新文章
- 从LeNet到GoogLeNet:逐层详解,看卷积神经网络的进化
- 英语和数学不好可以学python-Day2 怎么学 Python?
- 【牛客 - 2B】树(思维,dp,有坑)
- 《Scikit-Learn与TensorFlow机器学习实用指南》第4章 训练模型
- iOS:ASIHttpRequest虽不更新,但仍值得详细了解
- CentOS 7.2下ELK分析Nginx日志生产实战(高清多图)
- 一款免费的网络时间校准小程序
- Nginx 412 Precondition Failed
- Unity摄像机上下旋转镜头实现
- 【if,elseif,if else区别】看这一篇就够了
- sklearn之make_blobs:产生数据集
- MeterSphere案例分享丨88完美邮箱全面提升产品质量的落地指南
- RFID技术对危化品实行安全化
- 桌面右击没有WPS新建WORD文档
- 信息熵:什么是信息熵?
- RSA - 非对称加密算法简要介绍与JAVA实现
- hashmap中的key是有序的么_Java中的HashMap,为什么输出竟然是有序的
- 下载木马(QQ尾巴生成器)
- postgis数据库优化_基于PostGIS的高级应用(1)--PgRouting百万级别路网查询优化
- 五、docker--进程-文件-网络