分类
快捷导航

 

开启左侧

网站页面底部自适应漂浮代码

[复制链接] [查看百度是否已收录此帖]
梦之瑶-飞哥实名认证 发表于 2020-11-13 11:44:03 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

马上注册,享用更多功能,轻松玩转整个论坛。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
一段代码实现PC移动端底部浮悬代码
开始看到这段代码是装修网站上,然后自己写了个,1.6S进场动画
PC需要居中显示,大家拿去用吧!
PC端演示:
1.png
WAP端演示:

2.png

  1. <style type="text/css">
  2. * {margin:0px; padiing:0px;}
  3. .login_alert{position:fixed;bottom:0px;left:0px;width:100%;z-index:9999;}
  4. .login_alert_close{position:absolute;top:-10px;right:0px;z-index:1;cursor:pointer;}
  5. .login_alert_box{width:100%;text-align:center; background-color:rgba(61, 61, 61, 0.6); height:60px;}
  6. .login_alert_box div{cursor:default; font-family:'微软雅黑'; color:#66CCFF; font-size:26px; font-weight:bold; line-height:80px;}
  7. .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;}
  8. .login_alert_box div span{font-size:18px;}
  9. .login_alert{animation:show_alert_left 1.6s;-webkit-animation:show_alert_left 1.6s;-moz-animation:show_alert_left 1.6s;}
  10. .login_alert_box{background-color:rgba(0,0,0,0.6);height:60px;}
  11. .login_alert_box:hover{background-color:rgba(0,0,0,0.8);}
  12. .login_alert_box div{color:#66CCFF;font-size:26px;line-height:60px;}
  13. .login_alert_box div a{font-size:20px;line-height:200px;border-radius:4px;}
  14. @keyframes show_alert_left{
  15. from{left:-100%;}
  16. to{left:0px;}
  17. }
  18. @-webkit-keyframes show_alert_left{
  19. from{left:-100%;}
  20. to{left:0px;}
  21. }
  22. @-moz-keyframes show_alert_left{
  23. from{left:-100%;}
  24. to{left:0px;}
  25. }
  26. </style>
  27. <div class="login_alert" id="login_alert">
  28. <div class="login_alert_close" onclick="closeAlert()">
  29. </div>
  30. <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>
  31. <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>
复制代码



帖子地址: 

涢水天城论坛-www.6665q.com 一起来分享你的资源吧!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

会员达人更多+
广告位

热门推荐

更多+

最新信息

更多+
上个主题 下个主题 快速回复 客服中心 搜索 官方QQ群
Copyright  © 2015-2016  灵歆论坛  Powered   by  Discuz!  技术支持:灵歆网络科技    |网站地图

免责声明:


      本站资源来自及互联网收集,仅供用于学习和交流,不得用于商业用途,

请遵循相关法律法规,本站一切资源不代表本站立场,

全体用户必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容.

如有侵权争议、后门、不妥请联系本站删除联系邮箱:al30@qq.com处理!

注意:本站发布所有游戏信息,均来自互联网收集,与本站无关。请玩家仔细辨认游戏信息的真实性,避免上当受骗!