纯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>

okay,庆生开发的小Demo,以后可以尝试用Canvas画布或SVG试着在做一下,感谢阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
浅析两列自适应布局的3种思路
May 03 HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
Sep 14 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
Apr 23 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
Dec 14 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
Jul 22 HTML / CSS
canvas简单连线动画的实现代码
Feb 04 HTML / CSS
CSS 圆形进度栏
Apr 06 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 #HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 #HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 #HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 #HTML / CSS
详解HTML5表单新增属性
Dec 21 #HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 #HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 #HTML / CSS
You might like
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
PHP 微信支付类 demo
2015/11/30 PHP
Smarty模板配置实例简析
2019/07/20 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
python 两个数据库postgresql对比
2019/10/21 Python
python数据化运营的重要意义
2019/11/25 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
python多线程和多进程关系详解
2020/12/14 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
学习党章思想汇报
2014/01/07 职场文书
开会迟到检讨书
2014/01/08 职场文书
满月酒邀请函
2015/01/30 职场文书
创业计划之特色精品店
2019/08/12 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python