广告特效-可关闭缩放展开的底部浮动

广告简介

打开网页后在底部会显示横向的广告图像,可以点击缩放关闭，关闭后也可预留在左侧底部的位置上，效果非常不错，这里推荐给大家。

广告图片

CSS

*{ margin:0; border:0;}  
.fix-bottombottom-container{  
    width: 100%;  
    height: 222px;  
    position: fixed;  
    bottombottom: 0;  
    left: 0;  
    z-index: 999;  
    background: url(“../images/AprilFools’DayBanner.png”) center no-repeat;  
}  

.fix-bottombottom-container .close-icon{  
    width: 24px;  
    height: 25px;  
    position: absolute;  
    top: 100px;  
    rightright: 50%;  
    margin-right: –590px;  
    cursor: pointer;  
    -webkit-transition: -webkit-transform .3s;  
    -moz-transition: -moz-transform .3s;  
    -ms-transition: -ms-transform .3s;  
    -o-transition: -o-transform .3s;  
    transition: transform .3s;  
    background: url(“../images/close-afd-icon.png”) center no-repeat;  
}  

.fix-bottombottom-container .close-icon:hover{  
    -webkit-transform: rotate(180deg);  
    -moz-transform: rotate(180deg);  
    -ms-transform: rotate(180deg);  
    -o-transform: rotate(180deg);  
    transform: rotate(180deg);  
}  

.fix-bottombottom-pack{  
    width: 155px;  
    height: 130px;  
    position: fixed;  
    left: –155px;  
    bottombottom: 0;  
    cursor: pointer;  
    z-index: 999;  
    background: url(“../images/AprilFools’DayMini.png”) left no-repeat;  
}  

.xcx-ad-container{  
    width: 100%;  
    height: 130px;  
    position: fixed;  
    bottombottom: 0;  
    left: 0;  
    z-index: 999;  
    background: url(../images/xcx-ad-bg.png) center no-repeat;  
}  

.xcx-ad-container .close-ico{  
    width: 26px;  
    height: 26px;  
    position: absolute;  
    top: 15px;  
    rightright: 50%;  
    margin-right: –575px;  
    cursor: pointer;  
    -webkit-transition: -webkit-transform .3s;  
    -moz-transition: -moz-transform .3s;  
    -ms-transition: -ms-transform .3s;  
    -o-transition: -o-transform .3s;  
    transition: transform .3s;  
    background: url(../images/xcx-ad-close-ico.png) center no-repeat;  
}  

.xcx-ad-container .close-ico:hover{  
    -webkit-transform: rotate(180deg);  
    -moz-transform: rotate(180deg);  
    -ms-transform: rotate(180deg);  
    -o-transform: rotate(180deg);  
    transform: rotate(180deg);  
}  


.xcx-ad-container .more{  
    position: absolute;  
    rightright: 50%;  
    margin-right: –466px;  
    top: 60px;  
    width: 108px;  
    height: 28px;  
    line-height: 28px;  
    border: 2px solid #01bafe;  
    border-radius: 20px;  
    color: #fff;  
    font-size: 14px;  
    text-align: center;  
    background: #01a8fe;  
}  

.xcx-ad-container .more-two{  
    position: absolute;  
    rightright: 42%;  
    margin-right: –320px;  
    top: 50px;  
    width: 100px;  
    height: 28px;  
    line-height: 28px;  
    border-radius: 5px;  
    color: #fff;  
    font-size: 14px;  
    text-align: center;  
    text-decoration: none;  
    background: #fd3dce;  
    border: 2px solid #fd3dce;  
}  

.xcx-ad-container .more-two i{  
    display: inline–block;  
    width: 17px;  
    height: 17px;  
    background: url(“../images/ej-ico.png”) no-repeat;  
    vertical-align: middle;  
    margin-right: 6px;  
}  

.xcx-ad-back{  
    width: 144px;  
    height: 130px;  
    left:0;  
    position: fixed;  
    bottombottom: 0;  
    cursor: pointer;  
    z-index: 998;  
    background: url(../images/xcx-left–float-bg.png) left no-repeat;  
}

JS

function target_dis(){  
    var  target=document.getElementById(“xcx-ad”);  
    target.style.display=“none”;  
    }  
function target_disa(){  
    var  target=document.getElementById(“xcx-ad”);  
    target.style.display=“block”;  
    }

HTML

<div id=“xcx-ad” class=“xcx-ad-container”>  
       <div id=“close-ad” class=“close-ico” onclick=“target_dis();” ></div>  
       <a class=“more-two” target=“_blank” href=“https://www.sbkko.com/”>查看详情</a>  
</div>  
<div id=“xcx-ad-back” class=“xcx-ad-back” onclick=“target_disa();” ></div>