用html写出生日蛋糕,纯HTML5+CSS3制作生日蛋糕代码

.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;

}

Happy Birthday

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/309779.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

我们为什么推荐在Json中使用string表示Number属性值

在这篇简短的文章中,我将解释在使用JSON传输数据时,为什么浮点数或大十进制值应表示为字符串 。long类型引发的诡异情况长话短说,同事在利用swagger对接后端API时,诡异的发现swaggerUI中显示的json属性值并不是api返回的值。[Http…

并查集+基础知识点详解

并查集概念 并查集单看名字大家也能猜到这个算法的作用,是用来对集合进行合并和查找操作 并查集是一种树型的数据结构,用于处理一些不相交集合(Disjoint Sets)的合并及查询问题。——来自百度百科 就是将原本不一样的集合,但是由于某种关系有…

[C++11]move资源的转移

从实现上讲&#xff0c;std::move 基本等同于一个类型转换&#xff1a;static_cast<T&&>(lvalue);&#xff0c;函数原型如下: template<class _Ty> _NODISCARD constexpr remove_reference_t<_Ty>&& move(_Ty&& _Arg) _NOEXCEPT { …

网址导航html5源码图标版,最新仿hao123网址导航(晓风网址导航系统) v4.2

使用说明 采用aspaccess架构&#xff0c;简单易用 access数据库已做防下载处理&#xff0c;安全放心 程序不能放到子目录&#xff0c;否则无法生成全站 上传程序进入后台设置一下网站信息&#xff0c;生成所有HTML页面 首页网站标志LOGO目录位置&#xff1a;/images/logo_140.g…

基于 abp vNext 和 .NET Core 开发博客项目 - 统一规范API,包装返回模型

上一篇文章使用自定义仓储完成了简单的增删改查案例&#xff0c;有心的同学可以看出&#xff0c;我们的返回参数一塌糊涂&#xff0c;显得很不友好。在实际开发过程中&#xff0c;每个公司可能不尽相同&#xff0c;但都大同小异&#xff0c;我们的返回数据都是包裹在一个公共的…

奔小康赚大钱 HDU - 2255( 二分图匹配KM算法详解)

题目 传说在遥远的地方有一个非常富裕的村落,有一天,村长决定进行制度改革&#xff1a;重新分配房子。 这可是一件大事,关系到人民的住房问题啊。村里共有n间房间,刚好有n家老百姓,考虑到每家都要有房住&#xff08;如果有老百姓没房子住的话&#xff0c;容易引起不安定因素&…

记一次排查线上程序内存的忽高忽低,又是大集合惹祸了

一&#xff1a;背景1. 讲故事昨天继续还技术债&#xff0c;优化一轮后的程序拉到线上后内存继续忽高忽低&#xff0c;低的时候20G&#xff0c;高的时候30G&#xff0c;过了一会又下降了几个G&#xff0c;毫无疑问&#xff0c;程序中有什么集合或者什么操作占用了大量内存&#…

[C++11]forward完美转发

// 函数原型 template <class T> T&& forward (typename remove_reference<T>::type& t) noexcept; template <class T> T&& forward (typename remove_reference<T>::type&& t) noexcept;// 精简之后的样子 std::forward…

广州计算机专业王健,王健-计算机与信息工程学院

2.在国内外公开发行刊物上发表的学术论文(1)Jian Wang. A Novel K-NN Classification Algorithm for Privacy Preserving in Cloud Computing. Research Journal of Applied Sciences, Engineering and Technology, Vol. 4, Issue: 22, 2012 (EI源刊).(2)Jian Wang. Experimen…

Pipe HDU - 2150(判断线段相交+向量叉乘线代详解)

题目&#xff1a; 经过激烈的争夺&#xff0c;Lele终于把那块地从Yueyue的手里抢了回来。接下来&#xff0c;Lele要开始建造他的灌溉系统。 通过咨询Lele的好友——化学系的TT&#xff0c;Lele决定在田里挖出N条沟渠&#xff0c;每条沟渠输送一种肥料。 每条沟渠可以看作是一…

win7如何将计算机移至桌面,如何将win7电脑桌面的文件转移到其他盘中?

想必很多朋友都和小编一样&#xff0c;是一个嫌麻烦的人&#xff0c;是一个不怎么爱收拾的人吧?这种人有一个通病&#xff0c;那就是喜欢将一些重要的文件放置在win7 64位纯净版下载的桌面上&#xff0c;这样的话&#xff0c;不仅容易找到&#xff0c;而且方便使用&#xff0c…

Source Generator:C# 9 将迎来编译时元编程

源码生成器&#xff08;Source Generator&#xff09;是 C#编译器的一个新特性&#xff0c;开发者可以使用编译器生成的元数据检查用户代码&#xff0c;并生成附加的源文件&#xff0c;与程序的其他部分一起编译。受 F#类型提供程序的启发&#xff0c;C#源码生成器的目标也是为…

凸包算法知识总结

首先&#xff0c;什么是凸包&#xff1f; 假设平面上有p0~p12共13个点&#xff0c;过某些点作一个多边形&#xff0c;使这个多边形能把所有点都“包”起来。当这个多边形是凸多边形的时候&#xff0c;我们就叫它“凸包”。 处理何种问题&#xff1a;凸包可以看成在木板上钉许多…

计算机用英语表示方法有哪些,在计算机领域中,通常用英文单词“bit”来表示( )...

答案查看答案解析:【解析题】现代计算机系统由硬件系统和软件系统组成。人类直接操控硬件系统太复杂了&#xff0c;所以&#xff0c;将硬件的功能进行封装&#xff0c;只提供一个接口给人类使用&#xff0c;这个接口就是操作系统。【解析题】计算机网络的主要功能是 。【解析题…

[C++11]shared_ptr使用的注意事项(内存被重复析构,内存泄漏问题)

shared_ptr使用的注意事项: 1.不能使用一个原始地址初始化多个共享智能指针 2.函数不能返回管理了this的共享智能指针对象 3.共享智能指针不能循环引用 不能使用一个原始地址初始化多个共享智能指针 代码如下: #include <iostream> #include <memory> using name…

一文解读使用WinDbg排查iis 中CPU占用高的站点问题

一、概述在Window服务器部署程序后&#xff0c;可能因为代码的不合理或者其他各种各样的问题&#xff0c;会导致CPU暴增&#xff0c;甚至达到100%等情况&#xff0c;严重危及到服务器的稳定以及系统稳定&#xff0c;但是一般来说对于已发布的程序&#xff0c;没法即时看到出问题…

Power Network POJ - 1459(EK算法模板+详解)

题意&#xff1a; 总共有a个节点&#xff0c;其中有发电站b个、用户c个和调度器a-b-c个三种节点&#xff0c;每个发电站有一个最大发电量&#xff0c;每个用户有个最大接受电量&#xff0c;现在有d条有向边&#xff0c;边有一个最大的流量代表&#xff0c;最多可以流出这么多电…

[C++11]shared_ptr共享智能指针的初始化与使用

使用智能指针需要添加头文件: 代码如下: #include <memory>shared_ptr使用的注意事项: 1.不能使用一个原始地址初始化多个共享智能指针 2.函数不能返回管理了this的共享智能指针对象 3.共享智能指针不能循环引用 初始化: 1.通过构造函数初始化 代码如下: std::shar…

ap计算机科学课程内容,AP计算机科学课程补习有哪些知识点梳理?

计算机作为当前最被看好的一大专业领域&#xff0c;很多同学们在AP课程学习期间会选修AP计算机科学课程补习这门课来帮助自己打好知识基础。那么AP计算机科学课程补习有哪些知识点梳理?今天学通国际教育老师为大家介绍。1. Introductory Java Language FeaturesPackage And Cl…