div+css实现蜡烛燃烧的生日蛋糕效果代码-html代码-BFW代码库

div+css实现蜡烛燃烧的生日蛋糕效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现蜡烛燃烧的生日蛋糕效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>
  
    <meta charset="UTF-8">
<style>
@font-face {
	font-family:'Lato';
	font-style:italic;
	font-weight:300;
	src:url(https://fonts.gstatic.com/s/lato/v23/S6u_w4BMUTPHjxsI9w2_Gwfo.ttf) format('truetype')
}
html,body {
	height:100%
}
body {
	background:#a27bcc;
	background:radial-gradient(ellipse at center,#a27bcc 0,#6c5299 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a27bcc',endColorstr='#6c5299',GradientType=1)
}
.cake {
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-50px;
	margin-top:-50px;
	width:100px;
	height:100px
}
.cake:after {
	background:#ebe3e1;
	border-radius:100px;
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100px;
	height:2px
}
.velas {
	background:#fff;
	border-radius:100%;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-2.5px;
	margin-top:-8.33333333px;
	width:5px;
	height:16.66666667px
}
.velas:after,.velas:before {
	background:rgba(255,0,0,0.4);
	content:"";
	position:absolute;
	width:100%;
	height:2.22222222px
}
.velas:after {
	top:25%;
	left:0
}
.velas:before {
	top:45%;
	left:0
}
.fuego {
	border-radius:100%;
	box-shadow:0 0 40px 10px rgba(248,233,209,0.2);
	position:absolute;
	top:-12px;
	left:50%;
	margin-left:-3.33333333px;
	width:6.66666667px;
	height:12.5px
}
.fuego:nth-child(1) {
	-webkit-animation:fuego 2s infinite;
	animation:fuego 2s infinite
}
.fuego:nth-child(2) {
	-webkit-animation:fuego 1.5s infinite;
	animation:fuego 1.5s infinite
}
.fuego:nth-child(3) {
	-webkit-animation:fuego 1s infinite;
	animation:fuego 1s infinite
}
.fuego:nth-child(4) {
	-webkit-animation:fuego .5s infinite;
	animation:fuego .5s infinite
}
.fuego:nth-child(5) {
	-webkit-animation:fuego .2s infinite;
	animation:fuego .2s infinite
}
@-webkit-keyframes fuego {
	0% {
	background:rgba(254,248,97,0.5);
	transform:translateY(0) scale(1)
}
50% {
	background:rgba(255,50,0,0.1);
	transform:translateY(-20px) scale(0)
}
100% {
	background:rgba(254,248,97,0.5);
	transfo.........完整代码请登录后点击上方下载按钮下载查看