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

  发布时间:2023-01-05 16:50:44   作者:经海路大白狗   我要评论
这篇文章主要介绍了CSS3实现一根心爱的二踢脚示例代码,这里主要是布局一个DIV元素,根据现实的二踢脚设置其宽高,并且利用css3的box-shadow属性添加阴影效果,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

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(?css/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实现一根心爱的二踢脚示例代码,这里主要是布局一个DIV元素,根据现实的二踢脚设置其宽高,并且利用css3的box-shadow属性添加阴影效果,需要的朋友可
    2023-01-05
  • css3手动实现pc端横向滚动

    本文主要介绍了css3手动实现pc端横向滚动,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-20
  • CSS3实现指纹特效代码

    本文通过实例代码介绍了CSS3实现指纹特效,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2022-03-16
  • css3新增选择器的应用示例

    这篇文章主要为大家介绍了css3新增选择器的应用示例以及内容解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-05-10
  • css3新特性的应用示例分析

    这篇文章主要为大家介绍了css3新特性的应用示例分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2022-03-14
  • 详解css3中transition属性

    css3中通过transition属性可以实现一些简单的动画过渡效果,今天通过本文给大家介绍下css3中transition属性的示例代码,感兴趣的朋友跟随小编一起看看吧
    2022-02-18
  • css3中2D转换之有趣的transform形变效果

    在CSS3中,transform属性应用于元素的2D或3D转换,可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的形变处理,本文给大家介绍css3中2D转换之有趣
    2022-02-18
  • css3带你实现3D转换效果

    这篇文章主要介绍了css3带你实现3D转换效果,本篇的3D转换就是基于原来的2D转换而来,与2D转换的功能相似,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-02-18
  • CSS3实现360度循环旋转功能

    这篇文章主要介绍了CSS3实现360度循环旋转功能,整个div360度旋转,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考
    2022-01-25
  • 使用CSS3实现按钮悬停闪烁动态特效代码

    这篇文章主要介绍了使用CSS3实现按钮悬停闪烁动态特效,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-08-25

最新评论

?


http://www.vxiaotou.com