广告简介
打开网页后在底部会显示横向的广告图像,可以点击缩放关闭，关闭后也可预留在左侧底部的位置上，效果非常不错，这里推荐给大家。
广告图片
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>
文章链接：https://www.sbkko.com/1-80.html
文章标题：可关闭缩放展开的底部浮动广告特效
文章版权：SBKKO 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！
文章标题：可关闭缩放展开的底部浮动广告特效
文章版权：SBKKO 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！
