纯HTML5+CSS3制做生辰生日蛋糕(编码易懂)

日期:2020-10-11 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

空话很少说,先给大伙儿展现下实际效果图:

生日蛋糕分成3个一部分,底部生日蛋糕,高层生日蛋糕和烛炬一部分。HTML的合理布局构造也是依照这3一部分合理布局的。此外便是应用CSS精准定位和CSS3的rotate,內外黑影等实际效果调剂一部分DOM元素款式。较为简易,坚信码农都懂的。

不赘述其它有的没的了。

下面得出详细的的HTML编码和CSS编码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF⑻">
    <title></title>
    <style>
        .birthday .container{
            width:600px;
            height:600px;
            margin:0px auto;
            background: #fafafa;
            border-radius:5px;
            position: relative;
        }
        /**
       ** 高层的
       **/
        .birthday .top-one{
            position: absolute;
            width:280px;
            height: 280px;
            bottom: 200px;
            left:160px;
        }
        .birthday .top-one .bottom{
            position: absolute;
            width:280px;
            height: 280px;
            bottom:⑶0px;
            border:1px solid #3e2001;
            border-radius: 140px;
            transform: rotateX(60deg);
            z-index: 4;
            background: #3e2001;
            box-shadow: 0px 0px 20px #3e2001;
        }
        .birthday .top-one .top{
            position: absolute;
            width:280px;
            height: 280px;
            top:⑸0px;
            border-radius: 140px;
            background: #FFFFFF;
            transform: rotateX(60deg);
            box-shadow: 2px 2px 20px #b7b7b7;
            z-index: 6;
            background: -webkit-repeating-radial-gradient(circle, #783d01, #3e2001 10px, #914909 10px,white 20px);
            background: -moz-repeating-radial-gradient(circle, #783d01, #3e2001 10px,#914909 10px,white 20px);
        }
        .birthday .top-one .side{
            position: absolute;
            top:95px;
            width:280px;
            height: 70px;
            border:1px solid #3e2001;
            border-top-width: 0px;
            border-bottom-width: 0px;
            background: #FFFFFF;
            z-index: 5;
            background: #3e2001;
        }
        /**
        ** 最底层的
        **/
        .birthday .bottom-one{
            position: absolute;
            width:400px;
            height: 400px;
            bottom: 0px;
            left:100px;
        }
        .birthday .bottom-one .bottom{
            position: absolute;
            width:400px;
            height: 400px;
            bottom:⑶0px;
            border:1px solid #914909;
            border-radius: 200px;
            transform: rotateX(60deg);
            box-shadow: 2px 2px 20px #914909;
            z-index: 1;
            background: #3e2001;
            overflow: hidden;
        }
        .birthday .bottom-one .line{
            position: absolute;
            width:400px;
            height: 400px;
            border-radius: 200px;
            z-index: 1;
        }
        .birthday .bottom-one .line1{
            bottom: 30px;
            border:5px solid #783d01;
            left:⑸px;
            z-index: 1;
        }
        .birthday .bottom-one .top{
            position: absolute;
            width:400px;
            height: 400px;
            top:⑴00px;
            border:1px solid #3e2001;
            border-radius: 200px;
            background: #FFFFFF;
            transform: rotateX(60deg);
            z-index: 3;
            background: #783d01;
            box-shadow: inset 0px 0px 20px #3e2001;
        }
        .birthday .bottom-one .side{
            position: absolute;
            top:100px;
            width:400px;
            height: 130px;
            border:1px solid #3e2001;
            border-top-width: 0px;
            border-bottom-width: 0px;
            background: #3e2001;
            z-index: 2;
        }
        /**
        ** 最底层的文本
        **/
        .birthday .flower{
            position: relative;
            text-align: justify;
            z-index: 9;
            top:200px;
            font-size: 32px;
            font-family: "Helvetica Neue", "Noto Sans CJK SC", "Source Han Sans CN";
            color:#FFFFFF;
            font-weight: bold;
        }
        .birthday .flower:after{
            content:"";
            display:inline-block;
            position: relative;
            width:100%;
        }
        .birthday .flower i{
            position: relative;
            width:80px;
            line-height: 80px;
            display: inline-block;
            border-radius: 50%;
            border:2px solid #783d01;
            text-align: center;
        }
        /**
        ** 高层的文本
        **/
        .birthday .top-one .text{
            width:100%;
            text-align: center;
            position: absolute;
            top:165px;
            z-index: 9;
            margin:0px auto;
            font-size: 30px;
            color:#FFFFFF;
            transform: rotateX(60deg) skew(10deg,20deg);
        }
        /**
         ** 烛炬
        **/
        .birthday .candle{
            width:10px;
            height:80px;
            margin:0px auto;
            position: absolute;
            left:295px;
            top:130px;
            z-index: 9;
        }
        .birthday .candle .body{
            width:10px;
            height:70px;
            margin:0px auto;
            background: red;
            border-bottom-width: 0px;
        }
        .birthday .candle .top{
            width:10px;
            height: 10px;
            border-radius: 5px;
            transform: rotateX(60deg);
            position: relative;
            top:5px;
            background: red;
        }
        .birthday .candle .bottom{
            width:10px;
            height: 10px;
            border-radius: 5px;
            transform: rotateX(60deg);
            position: relative;
            bottom:5px;
            background: red;
            box-shadow: 1px 1px 10px red;
        }
        .birthday .candle .fire{
            position: absolute;
            width:6px;
            height: 6px;
            left:2px;
            transform: rotate(45deg);
            background: #ffd507;
            box-shadow: 0px 0px 20px #ffff00, 2px 2px 10px red;
        }
    </style>
</head>
<body>
    <div class="birthday">
        <div class="container">
            <div class="candle">
                <div class="fire"></div>
                <div class="top"></div>
                <div class="body"></div>
                <div class="bottom"></div>
            </div>
            <div class="top-one">
                <div class="top"></div>
                <div class="side"></div>
                <div class="bottom"></div>
                <div class="text">
                    Happy Birthday
                </div>
            </div>
            <div class="bottom-one">
                <div class="top"></div>
                <div class="side"></div>
                <div class="bottom">
                    <div class="line line1"></div>
                </div>
                <div class="flower">
                    <i style="top:⑵0px;transform: rotateY(50deg)">生</i>
                    <i style="top:15px;transform: rotateY(30deg)">日</i>
                    <i style="top:15px;transform: rotateY(30deg)">快</i>
                    <i style="top:⑵0px;transform: rotateY(50deg)">乐</i>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

以上所述是网编给大伙儿详细介绍的纯HTML5+CSS3制做生辰生日蛋糕(编码易懂),期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!

上一篇:H5 canvas完成嘴馋蛇小手机游戏 返回下一篇:没有了