纯HTML5+CSS3制作生日蛋糕(代码易懂)


Posted in HTML / CSS onNovember 16, 2016

废话不多说,先给大家展示下效果图:

纯HTML5+CSS3制作生日蛋糕(代码易懂)

蛋糕分为三个部分,底部蛋糕,顶层蛋糕和蜡烛部分。HTML的布局结构也是按照这三部分布局的。另外就是使用CSS定位和CSS3的rotate,内外阴影等效果调整部分DOM元素样式。比较简单,相信码农都懂的。

不赘述其它有的没的了。

下面给出完整的的HTML代码和CSS代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <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:-30px;
            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:-50px;
            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:-30px;
            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:-5px;
            z-index: 1;
        }
        .birthday .bottom-one .top{
            position: absolute;
            width:400px;
            height: 400px;
            top:-100px;
            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:-20px;transform: rotateY(50deg)">生</i>
                    <i style="top:15px;transform: rotateY(30deg)">日</i>
                    <i style="top:15px;transform: rotateY(30deg)">快</i>
                    <i style="top:-20px;transform: rotateY(50deg)">乐</i>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

以上所述是小编给大家介绍的纯HTML5+CSS3制作生日蛋糕(代码易懂),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
Jan 29 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 HTML / CSS
HTML5制作表格样式
Nov 15 #HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 #HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 #HTML / CSS
html5 视频播放解决方案
Nov 06 #HTML / CSS
HTML5头部标签的一些常用信息小结
Oct 23 #HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 #HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 #HTML / CSS
You might like
PHP新手入门学习方法
2011/05/08 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
offsetParent 算法分析
2010/04/05 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
Python实现的栈(Stack)
2018/01/26 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
骨干教师培训制度
2014/01/13 职场文书
就业自我评价
2014/02/04 职场文书
党校培训自我鉴定范文
2014/04/10 职场文书
给老婆的保证书范文
2014/04/28 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书