index.html

﻿<!DOCTYPE html>
<html lang="zh-CN" >
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>气泡上升</title>
<meta name="keywords" content="Canvas,Canvas 效果,sketch,Swallow,美化,气泡上升" />
<meta name="description" content="HTML5+Canvas实现的网页背景气泡上升动画特效，是基于HTML5 Canvas绘制的白色气泡上升动画，适用于网页背景动画特效" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="thumbnail_canvas" class="single-thumbnail-card">
        <div class="single-thumbnail">
            <div class="single-image" style="background-image: url('https://img.iowen.cn/images/2019/07/27/6.jpg')"></div>
        </div>
        <canvas id="header_canvas"style="position:absolute;bottom:0"></canvas>   
        <div class="single-thumbnail-overlay"> 
            <div class="single-title">
                <a href="https://www.iowen.cn">一为忆</a>
                <h1 style="margin-top: 0;">canvas动画效果：上升的气泡动画特效</h1>
            </div>
        </div>
    </div>	
    <a class="button" href="https://www.iowen.cn/rising-bubble-animation-effect">Download</a>
    <script src="js/bubble.js"></script>
</body>
</html>