X  
登录

还没有账号?立即注册

忘记密码?
登陆
X  
注册

已经有账号?马上登陆

立即注册
统计
  • 建站日期:2021-03-10
  • 文章总数:607 篇
  • 评论总数:267 条
  • 分类总数:15 个
  • 最后更新:6月6日
文章 网站代码

底部自适应漂浮代码

云烟雨
首页 网站代码 正文
广告

一段代码实现PC移动端底部浮悬代码

开始看到这段代码是装修网站上,然后自己写了个,1.6S进场动画

PC需要居中显示,大家拿去用吧!

PC端演示:

 

WAP端演示:


底部自适应漂浮代码
-云烟博客
-第1
张图片

<style type="text/css">

* {margin:0px; padiing:0px;}

.login_alert{position:fixed;bottom:0px;left:0px;width:100%;z-index:9999;}

.login_alert_close{position:absolute;top:-10px;right:0px;z-index:1;cursor:pointer;}

.login_alert_box{width:100%;text-align:center; background-color:rgba(61, 61, 61, 0.6); height:60px;}

.login_alert_box div{cursor:default; font-family:'微软雅黑'; color:#66CCFF; font-size:26px; font-weight:bold; line-height:80px;}

.login_alert_box div a{text-decoration:none;display:inline-block;padding:5px 20px; font-size:20px; color:#000; background-color:#00CC99; border-radius:4px; line-height:26px;}

.login_alert_box div span{font-size:18px;}

.login_alert{animation:show_alert_left 1.6s;-webkit-animation:show_alert_left 1.6s;-moz-animation:show_alert_left 1.6s;}

.login_alert_box{background-color:rgba(0,0,0,0.6);height:60px;}

.login_alert_box:hover{background-color:rgba(0,0,0,0.8);}

.login_alert_box div{color:#66CCFF;font-size:26px;line-height:60px;}

.login_alert_box div a{font-size:20px;line-height:200px;border-radius:4px;}

@keyframes show_alert_left{

from{left:-100%;}

to{left:0px;}

}

@-webkit-keyframes show_alert_left{

from{left:-100%;}

to{left:0px;}

}

@-moz-keyframes show_alert_left{

from{left:-100%;}

to{left:0px;}

}

</style>

<div class="login_alert" id="login_alert">

<div class="login_alert_close" onclick="closeAlert()">

</div>

<center><script type="text/javascript" charset="UTF-8" src="https://apimall.dataoke.com/api/component/code-info/v1?comId=3149&type=2&v=1604687945" exte-id="3149" data-size="800x80" data-color="#FF681D" data-show="1" data-txt="网购前搜索全网隐藏优惠券更省钱!"></script></center>

<script type="text/javascript" charset="UTF-8" src="https://apimall.dataoke.com/api/component/code-info/v1?comId=3154&type=2&v=1604684235" exte-id="3154" data-size="100%*100px" data-index="5000" data-color="#FF7119" data-show="1"></script>

版权说明
文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明:未标注转载均为本站原创,转载时请以链接形式注明文章出处。如有侵权、不妥之处,请联系站长删除。敬请谅解!

-- 展开阅读全文 --
这篇文章最后更新于2020-11-7,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
个人发卡网站源码(内置2套模板)
« 上一篇
一键变声 支持游戏变声 超多素材
下一篇 »

发表评论

HI ! 请登录
注册会员,享受下载全站资源特权。
登陆 注册
社交账号登录

每天一语

热门文章

1
2
96云呼轰炸机全开源源码
3
爱奇艺签到助手PHP网站源码
4
限制QQ登录解除3个常用方法

最新文章