<!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;
        }
        
        
        
           @keyframes sunrise {
               0% {
                  transform: scale(1);
               }
                10% {
                 transform: scale(1.1);
               }
            
                20% {
                 transform: scale(1.2);
               }
                30% {
                 transform: scale(1.3);
               }
                40% {
                 transform: scale(1.4);
               }
                50% {
                 transform: scale(1.5);
               }
                60% {
                 transform: scale(1.4);
               }
                70% {
                 transform: scale(1.3);
               }
                80% {
                 transform: scale(1.2);
               }
              90% {
                  transform: scale(1.1);
               }
            
               100% {
                  transform: scale(1);
               }
        }
      
        .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;
            animation-name: sunrise;
            animation-duration: 2s;
            animation-timing-function: ease;
            animation-iteration-count:infinite;
            -webkit-animation-iteration-count:infinite;

        }

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

css3属性，会动的生日蛋糕的更多相关文章

  1. JS判断浏览器是否支持某一个CSS3属性

    1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的ani ...

  2. 如何处理CSS3属性前缀

    今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...

  3. CSS3属性 box-shadow 向框添加一个或多个阴影

    CSS3属性 利用box-shadow制作网页页眉背景 box-shadow 浏览器支持 IE9+.Firefox 4.Chrome.Opera 以及 Safari 5.1.1 支持 box-shad ...

  4. CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  5. 让IE6/IE7/IE8浏览器支持CSS3属性

    让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...

  6. 实用的CSS3属性和使用技巧

    CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力.对于前端开发者.网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能. 下面列出了一些非常实用的CSS3属性和使用技 ...

  7. H5、CSS3属性的支持性以及flex

    一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问 ...

  8. 移动端 几个css3属性的练习

    转行做前端,上班有一个星期了,什么都不懂,今天学习了几个新的css3属性,记录下来. 注:所有的测试均是在chrome上手机模式测试,与真实的手机环境可能有误差 1:-webkit-tap-heigh ...

  9. 【原】常见CSS3属性对ios&android&winphone的支持

    2个月前,我在博文<webapp开发中兼容Android4.0以下版本的css hack>中写过“那对于做移动网页开发的同事来说,一般只要做好webkit内核浏览器的展现效果就行了” ,在 ...

  10. CSS3属性border-radius绘制多种多样的图形

    border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情.radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可以 ...

随机推荐

  1. DB1：数据库的创建和文件的修改

    在SQL Server中,使用Create Database创建数据库,使用Alter Database命令,能够修改数据库的数据文件和日志文件. 一,创建数据库 1,在创建数据库时,最佳实践是: 创 ...

  2. 01.LoT.UI 前后台通用框架分解系列之——小图片背景全屏显示（可自动切换背景）

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  3. 使用C/C++写Python模块

    最近看开源项目时学习了一下用C/C++写python模块,顺便把学习进行一下总结,废话少说直接开始: 环境:windows.python2.78.VS2010或MingW 1 创建VC工程 (1) 打 ...

  4. openresty 前端开发入门四之Redis篇

    这章主要演示怎么通过lua连接redis,并根据用户输入的key从redis获取value,并返回给用户 操作redis主要用到了lua-resty-redis库,代码可以在github上找得到 而且 ...

  5. BridgePattern(桥接模式)

    /** * 桥接模式 * @author TMAC-J * 应用于多维度方案 * 用组合的形式代替继承 * 符合单一职责原则 * 一个类只有一个引起他变化的原因 * 增加程序灵活性 */ public ...

  6. 使用Microsoft的IoC框架：Unity来对.NET应用进行解耦

    1.IoC/DI简介 IoC 即 Inversion of Control,DI 即 Dependency Injection,前一个中文含义为控制反转,后一个译为依赖注入,可以理解成一种编程模式,详 ...

  7. 热修复-Tinker

    微信开源,真是喜出望外,必须要去看看啊,比起nuwa来微信好很多,而且github上也有专门的官方文档说明,还有很多资料查询 参考地址:https://github.com/Tencent/tinke ...

  8. iOS从零开始学习直播之2.采集

      直播的采集由采集的设备(摄像头.话筒)不同分为视频采集和音频采集,本篇文章会分别介绍. 1.采集步骤   1.创建捕捉会话(AVCaptureSession),iOS调用相机和话筒之前都需要创建捕 ...

  9. Alwayson的IP冲突

    Alwayson的IP冲突 https://social.technet.microsoft.com/Forums/office/en-US/4d50cb1c-eef7-4dcc-b937-3c8eb ...

  10. mono-3.4.0 源码安装时出现的问题 [do-install] Error 2 [install-pcl-targets] Error 1 解决方法

    Mono 3.4修复了很多bug,继续加强稳定性和性能(其实Mono 3.2.8 已经很稳定,性能也很好了),但是从http://download.mono-project.com/sources/m ...