css教程

CSS+JS简单的底部浮动搜索框效果代码

精准像素 2020-11-08 人阅读

一段CSS+JS简单的底部浮动搜索框效果代码,实现PC移动端底部浮悬代码。

CSS+JS简单的底部浮动搜索框效果代码

CSS代码

<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>

HTML代码

<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>
相关推荐
  • CSS样式
  • CSS样式详解视频教程
    CSS样式详解视频教程

    什么是CSS样式CSS样式全称为层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语...

    视频教程 81 2年前
  • wp_dequeue_style移除css样式函数

    使用WordPress,遇到不喜欢或者用不上的css样式时,我们可以使用wp_dequeue_style函数来移除被wordpress系统加载的样式文件。使用wp_dequeue_style函数可以不用破坏wordpress结构,实现移除文件的目的。函数详解wp_dequeue_style( string $handle )删除以...

    wordpress教程 16 10个月前
  • CSS层叠样式表手册
    CSS层叠样式表手册

    CSS层叠样式表手册,包含CSS索引、CSS 结构、CSS 属性三大类,可查手册,可学教程。CSS手册截图

    电子书 49 6个月前