canvas实现的星星连线联动弹动动效实例页面

展示

代码

CSS代码：

.container {
    position: relative;
    height: 600px;
    background-color: #000;
}

canvas {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
}

.container img {
    position: absolute;
    left: 0; right: 0; top: 50%;
    margin: 120px auto 0;
    display: none;
}

.container .active {
    display: inline;
}

HTML代码：

<div id="container" class="container">
    <canvas id="starCanvas"></canvas>
    <canvas id="starSignCanvas"></canvas>

    <img src="txt-1.png" class="active" width="136" height="32" alt="少女心座">
    <img src="txt-2.png" width="102" height="32" alt="武神座">
    <img src="txt-3.png" width="171" height="32" alt="霸道总裁座">
    <img src="txt-4.png" width="136" height="32" alt="智多星座">
    <img src="txt-5.png" width="136" height="32" alt="幸运星座">
    <img src="txt-6.png" width="136" height="32" alt="文曲星座">
</div>

JS代码：

// 参见页面源代码