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

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

第一步您需要做个透明图片（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年网站开发经验的网站设计师，欢迎关注我的头条号前端技术分享，您有需要网站建设，网站维护相关的需求可以找我。

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