在做活動宣傳的時候，經常想要實現一種像氣球一樣可愛的可以隨時向上和向下浮動的動態效果，以前那種網頁兩側對聯圖片已經不太適合時代發展了。現在的網頁設計更注重移動端的動態效果體驗。

今天我將帶領大家做一個可愛的動態效果，效果演示請參照上面的動畫圖片。

第一步您需要做個透明圖片（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年網站開發經驗的網站設計師，歡迎關注我的頭條號前端技術分享，您有需要網站建設，網站維護相關的需求可以找我。

如果這篇文章可以幫助到您，請收藏和轉發。