用css和jquery实现的气球浮动效果，简单好用

发布时间：2019-03-29 作者：医院网站建设关键词：医院广告设计

用css实现的气球动态效果

在做活动宣传的时候，经常想要实现一种像气球一样可爱的可以随时向上和向下浮动的动态效果，以前那种网页两侧对联图片已经不太适合时代发展了。现在的网页设计更注重移动端的动态效果体验。

今天我将带领大家做一个可爱的动态效果，效果演示请参照上面的动画图片。

第一步您需要做个透明图片（rightflag.png）保存到网站目录里。

开始上代码请将如下代码放到页面的css部分

<style> .hot_right_quban{width:25%;max-width:130px;position:fixed;left:-130px;top:16%;z-index:999999;opacity:1;animation:swing 1s 1s ease both; transition:all 1s ease-in-out;opacity:0;} .hot_right_quban p{width:94%;display:inline-block;font-size:14px;color:#fff;background:rgb(14, 14, 14);text-align:center;border-radius:6%;padding:4% 0px;line-height:1.3em;margin:0 3%;} .hot_right_quban p span{background:#fc873f;display:inline-block;padding:0 5%;margin:0 4%;border-radius:28%;} .hot_right_quban img{width:100%;height:auto;} .hot_right_quban .hot_close_quban{display:block;width:21%;height:10%;position:absolute;right:0;top:0;z-index:1000000;} .hot_right_quban.animate{left:0; opacity:1; } .hot_hide{left:-130px !important; opacity:0 !important; } #hot_hide{left:-130px; opacity:0; } .hot_right_quban.animate1{animation:tops 40s infinite;} /*以下代码实现像气球一样的动态浮动效果*/@-webkit-keyframes tops{ 0%{top:16%;} 50%{top:50%;} 100%{top:16%;}}@-moz-keyframes tops{ 0%{top:16%;} 50%{top:50%;} 100%{top:16%;}}@-ms-keyframes tops{ 0%{top:16%;} 50%{top:50%;} 100%{top:16%;}}@-o-keyframes tops{ 0%{top:16%;} 50%{top:50%;} 100%{top:16%;}}</style>

请将如下代码放到网站的js部分

<script>
   function rightflag(){
   var rightflag = false;
       $("body").append("<div class='hot_right_quban'><a href=\"javascript:void(0)\" onClick=\"openChat('hd2019_right')\"><img src='rightflag.png'></a></div>");
       dyfun = true;
   if(dyfun){
       function hot_start() {
           $(".hot_right_quban").addClass('animate');
           setTimeout(function() {$(".hot_right_quban").addClass('animate1');}, 3000);
       }

       $(".hot_right_quban").append('<span class="hot_close_quban"></span>');
       $(".hot_close_quban").click(function() {
           $(".hot_right_quban").attr('id', 'hot_hide');
           $(".hot_right_quban").removeClass('animate1');
           setTimeout(function() {$(".hot_right_quban").attr('id', '');}, 15000);
           hot_start();
       });
       setTimeout(hot_start, 3000);
   }
}

</script>
<script>rightflag();</script>