css3海上波浪浮標(biāo)菜單

js css3繪制海面上漂浮的浮標(biāo)菜單，點(diǎn)擊彈出窗口信息特效。

使用方法：

1、head引入css文件

<link rel="stylesheet" href="css/style.css">

2、body引入部分

<div class="navigation-container">
	<button class="buoy" onClick="modal('了解更多')">了解更多</button>
	<button class="buoy" onClick="modal('如何幫助')">如何幫助</button>
	<button class="buoy" onClick="modal('志愿者')">志愿者</button>
	<button class="buoy no-mobile" onClick="modal('捐贈(zèng)')">捐贈(zèng)</button>
	<button class="buoy no-mobile" onClick="modal('分享')">分享</button>
</div>

<h1>浮標(biāo)菜單</h1>

<div id="modal" style="display: none;">
	<div id="modal-title"></div>
	<div id="modal-text">
		<p>現(xiàn)在釣魚(yú)的浮漂,又叫浮子、魚(yú)漂、魚(yú)浮、浮標(biāo)等。用手竿垂釣時(shí),浮漂幾乎是不可少的,用海竿浮釣時(shí),浮漂也不可少。</p>
	</div>
	<button onClick="closeModal()" id="modal-close">關(guān)閉</button>
</div>

<div id="ocean-bottom"></div>
<div id="sky-top"></div>
<div id="wave-container" width="100%" height="100%"></div>

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

使用聲明

1. 本站所有素材（未指定商用），僅限學(xué)習(xí)交流。
2. 會(huì)員在本站下載的原創(chuàng)商用和VIP素材后，只擁有使用權(quán)，著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材，未經(jīng)合法授權(quán)，請(qǐng)勿用于商業(yè)用途，會(huì)員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材，否則一律封號(hào)處理。
4. 本平臺(tái)織夢(mèng)模板僅展示和個(gè)人非盈利用途，織夢(mèng)系統(tǒng)商業(yè)用途請(qǐng)預(yù)先授權(quán)。

查看演示下載資源

39 4770 7