纯CSS3绘制卡通风景画

纯CSS3绘制卡通风景画

html标签：

<div id="wrap">
    <div class="sun"></div>
    <div class="cloud1"></div>
    <div class="cloud2"></div>
    <div class="house">
        <div class="wuding"></div>
        <div class="window"></div>
        <div class="yanchong"></div>
    </div>
    <div class="grass1"></div>
    <div class="grass2"></div>
    <div class="tree1"></div>
    <div class="tree2">
        <div class="tree2_gan"></div>
    </div>
    <div class="tree3"></div>
    <div class="tree4"></div>
    <div class="tree5">
        <div class="tree5_gan"></div>
    </div>
</div>

CSS样式：

 <style  type="text/css">

        body,div,h1{

            margin:0;

            padding:0;

        }

        html,body{

            height:100%;

        }

        body{

            font:1em "microsoft Yahei";

            background-color:#000;

            }

        #wrap{

            position: relative;

            width: 1200px;

            height: 670px;

            left: 50%;

            margin-left: -600px;

            top: 50%;

            margin-top: -335px;

            overflow: hidden;

            background-image: linear-gradient(#26B7E1,#BDDBE8);

        }

        .sun{

            position: absolute;

            left: 300px;

            top: 10px;

            width: 60px;

            height: 60px;

            border-radius: 50%;

            background-image: radial-gradient(#ff0,#F0CA17);

            box-shadow: 0 0 50px #FF0;

            animation:sunRise 1s ease-out forwards;

        }

        .cloud1{

            position: absolute;</