html5 canvas绘制三角形沙漏动画特效

html5 canvas绘制三角形沙漏动画特效

一款html5 canvas绘制三角形沙漏动画特效,点击翻转按钮可以将时间沙漏翻转过来。

使用方法
在页面引入相关CSS样式代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
body {
    margin: 0;
    overflow: hidden;
    background: #2942b0;
}

button {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 100px;
    height: 40px;
    border-radius: 5px;
    font-size: 18px;
    color: white;
    background: transparent;
    border: 1px solid white;
    transition: all .3s ease-in-out;
    cursor: pointer;
}

button:hover {
    background: white;
    color: #8785a2;
}

canvas {
    transition: transform 1s ease;
}

canvas.flip {
    transform: rotate(180deg);
}
当前内容只有登录了才能查看,如果您已经注册,请登录
2

发表评论