医院网站建设

当前位置: > 医疗网站建站教程 > 医院网站设计 >

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

运行这段代码之前需要在网页头部引用jquery

<script src="/js/jquery.min.js"></script>

上面的代码可以实现像我的案例一样的动态效果了。

欢迎关注我,我是一个有16年网站开发经验的网站设计师,欢迎关注我的熊掌号医院网站建设,您有需要网站建设,网站维护相关的需求可以找我。

如果这篇文章可以帮助到您,请收藏和转发。

责任编辑:医院网站建设
医院网站设计
医院网站设计
使用技巧
调试安装
运营推广