css 布局，过渡

做了一个小案例，关于我们内边距的处理的，然后再加上一些过渡效果

效果：

具体实现重点加上这里：

具体代码实现：

CSS部分：

<style>
            #container{
                border:2px solid sandybrown;
                width: 780px;
                margin: 0 auto;
                overflow: hidden;
                margin-top: 100px;
            }

            #conter{
                margin-right: -20px;
                margin-bottom: -20px;
                overflow: auto;

            }
            .multiple{
                position: relative;
                width: 240px;
                height: 160px;
                float: left;
                overflow: hidden;
                margin: 0 20px 20px 0;
            }

            .yingc{
                background: black;
                width: 240px;
                height: 80px;
                position: absolute;
                bottom:-45px;
                z-index:;
                opacity: 0.7;
                transition: all .3s linear;
                /*规定以相同速度开始至结束的过渡效果
                 * ease
                 * （等于 cubic-bezier(0,0,1,1)）。*/
            }

            .multiple:hover .yingc{
                transform: translatey(-45px);

            }

            .mf{
                width: 25px;
                height: 100px;
                background: orange;
                position: absolute;
                top:-25px;
                left: 10px;
                transform: rotate(45deg);
                z-index:;
            }

            .wenzi{
                z-index:;
                font-weight: bold;
                position: absolute;
                top:20px;
                left: -3px;
                color: white;
                font-size: 12px;
                transition: all .6s linear;
                transform: rotate(-45deg);
            }

            .multiple:hover .wenzi{

                font-size: 23px;
                /*transform: rotate(-45deg);*/
                /*transform: rotateY(30deg);
                left: 60px;
                bottom:30px;
                color: cyan;
                font-weight: bold;*/

            }

            .yan1{
                color:white;
                font-size: 15px;
                line-height: 2px;
                text-align: center;
                margin: 0 auto;
            }

            .bh{
                width: 240px;

            }

            .yans{

                width: 150px;
                color:white;
                font-size: 16px;
                float: left;
                height: 30px;
                line-height: 30px;
                margin-left: 3px;
                margin-right: 7px;
                margin-top: 3px;
            }
            .border{
                display: inline-block;
                background:red;
                width: 80px;
                height: 35px;
                line-height: 40px;
                color:white;
                font-size: 15px;
                float: left;
                text-align: center;
            }

        </style>

HTML部分：

 <div id="container">
             <div id="conter">

                 <div class="multiple">

                     <img src="marginpic/j(2).jpg" width="240" height="160"/>
                     <div class="mf"></div>
                     <div class="wenzi">特价优惠</div>
                 <div class="yingc">

                     <div class="bh">
                         <div class="yans">铂金假日酒店</div>
                         <div class="border">￥258/起</div>
                     </div>

                         <span class="yan1">团房休闲度假老客全网低价</span>
                 </div>
             </div>

                 <div class="multiple">
                     <img src="marginpic/j(2).png" width="240" height="160"/>
                         <div class="mf"></div>
                         <div class="wenzi" style="color:green">可预约</div>
                         <div class="yingc">
                             <div class="bh">
                                 <span class="yans">诺曼精品酒店</span>
                                 <span class="border">￥161/起</span>
                                 <span class="yan1">团房休闲度假老客全网低价</span>
                             </div>
                         </div>
                 </div>
                 <div class="multiple">
                     <img src="marginpic/j(3).jpg" width="240" height="160"/>
                         <div class="mf"></div>
                         <div class="wenzi" style="color: red;">已爆满</div>
                         <div class="yingc">
                             <div class="bh">
                                 <span class="yans">企鹅酒店</span>
                                 <span class="border">￥605/起</span>
                                 <span class="yan1">团房休闲度假老客全网低价</span>
                             </div>
                         </div>
                 </div>

                 <div class="multiple">
                     <img src="marginpic/j(3).png" width="240" height="160"/>
                     <div class="mf"></div>
                     <div class="wenzi">特价优惠</div>
                     <div class="yingc">
                         <div class="bh">
                                 <span class="yans">珠海海泉湾维景</span>
                                 <span class="border">￥258/起</span>
                                 <span class="yan1">新客全网低价含早</span>
                         </div>
                     </div>
                 </div>

                 <div class="multiple">
                     <img src="marginpic/j(4).jpg" width="240" height="160"/>
                     <div class="mf"></div>
                     <div class="wenzi">优惠多多</div>
                     <div class="yingc">
                         <div class="bh">
                             <span class="yans">珠海东方印象大酒店</span>
                             <span class="border">￥258/起</span>
                             <span class="yan1">新客全网低价含早</span>
                         </div>
                     </div>
                 </div>

                 <div class="multiple">
                     <img src="marginpic/j(4).png" width="240" height="160"/>

                     <div class="mf"></div>
                     <div class="wenzi">特价优惠</div>

                     <div class="yingc">
                         <div class="bh">
                             <span class="yans">南油大酒店</span>
                             <span class="border">￥818/起</span>
                             <span class="yan1">网低价新客全网低价亲子酒店点评含早</span>
                         </div>
                     </div>

                 </div>

             </div>
         </div>

最终效果：

（本人正在学习阶段，有什么不对的地方，请路过的大神指教一下）