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.........完整代码请登录后点击上方下载按钮下载查看