网站底部添加自由缩放浮动广告特效代码

Jaysun

效果演示

1.webp


网站首页底部可自由伸缩的广告代码,在其他网站看到了,很多网站也都在使用,个人比较喜欢,喜欢的话可以下载使用。


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="http://www.yiluxb.cn">查看详情</a>
</div>
<div id="xcx-ad-back" class="xcx-ad-back" onclick="target_disa();" ></div>

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

付费内容
售价:5 积分
登录注册购买

您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (暂无评论,486人围观)

还没有评论,来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码