Skip to content

Commit 0a0a213

Browse files
author
liguanliang
committed
feat: add
1 parent 210dbc2 commit 0a0a213

File tree

3 files changed

+124
-20
lines changed

3 files changed

+124
-20
lines changed

‎animate/index.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
#aa {
6+
width: 100px;
7+
height: 100px;
8+
background: red;
9+
position: relative;
10+
animation: mymove 5s infinite;
11+
animation-play-state: running;
12+
13+
/* Safari and Chrome */
14+
-webkit-animation: mymove 5s infinite;
15+
-webkit-animation-play-state: running;
16+
}
17+
18+
@keyframes mymove {
19+
from {
20+
left: 0px;
21+
}
22+
to {
23+
left: 200px;
24+
}
25+
}
26+
27+
@-webkit-keyframes mymove /* Safari and Chrome */ {
28+
from {
29+
left: 0px;
30+
}
31+
to {
32+
left: 200px;
33+
}
34+
}
35+
</style>
36+
</head>
37+
<body>
38+
<p>
39+
<strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持
40+
animation-play-state 属性。
41+
</p>
42+
43+
<div id="aa"></div>
44+
<script>
45+
setInterval(() => {
46+
document.getElementById('aa').style['animation-play-state'] = 'paused';
47+
document.getElementById('aa').style['-webkit-animation-play-state'] =
48+
'paused';
49+
}, 1000);
50+
setInterval(() => {
51+
document.getElementById('aa').style['animation-play-state'] = 'running';
52+
document.getElementById('aa').style['-webkit-animation-play-state'] =
53+
'running';
54+
}, 2000);
55+
</script>
56+
</body>
57+
</html>

‎canvas-svg/canvas/canvas.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
2+
let i = 5;
3+
let increase = true;
4+
let timeGap = 166;
5+
clearInterval(this.timer);
6+
7+
/* Rotate change */
8+
this.timer = setInterval(() => {
9+
increase ? i++ : i--;
10+
if (i === 10 || i === 5) {
11+
increase = !increase;
12+
}
13+
this.circleRotate += (i * i) / 40;
14+
this.leftEllipseRotate += (i * i) / 10;
15+
this.rightEllipseRotate += (i * i) / 20;
16+
17+
if (this.circleRotate >= 360) this.circleRotate = 0;
18+
if (this.leftEllipseRotate >= 360) this.leftEllipseRotate = 0;
19+
if (this.rightEllipseRotate >= 360) this.rightEllipseRotate = 0;
20+
}, timeGap);
21+
22+
/* opcity change */
23+
const opcityTimeGap = 16;
24+
let c = 30;
25+
let incre = true;
26+
this.opacityTimer = setInterval(() => {
27+
incre ? c++ : c--;
28+
if (c === 100 || c === 30) {
29+
incre = !incre;
30+
}
31+
this.opacity = 0.01 * c;
32+
}, opcityTimeGap);

‎canvas-svg/svg/index.html

Lines changed: 35 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
移动到 x:150 y:50 <br />
1818
椭圆 x轴: 50 y轴: 50 <br />
1919
x-axis-rotation(弧线旋转): 0, <br />
20-
large-arc-flag 决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧:1<br />
20+
large-arc-flag
21+
决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧:1<br />
2122
顺时针/逆时针: 0(逆时针) 1(顺时针) <br />
2223
终点的坐标 : dx: 100 dy: 150 <br />
2324

@@ -26,14 +27,14 @@
2627
<svg class="rotate" viewBox="0 0 200 200">
2728
<!-- <circle id="mycircle" cx="400" cy="300" r="50"></circle> -->
2829
<g>
29-
<path
30-
onclick="onclickEvent(event)"
31-
class="trigger"
32-
fill="none"
33-
stroke="#fd30ae"
34-
d="M100,20 A80,80, 0,0,1, 140,30.8"
35-
stroke-width="10"
36-
></path>
30+
<path
31+
onclick="onclickEvent(event)"
32+
class="trigger"
33+
fill="none"
34+
stroke="#fd30ae"
35+
d="M100,20 A80,80, 0,0,1, 140,30.8"
36+
stroke-width="10"
37+
></path>
3738
</g>
3839
<path
3940
onclick="onclickEvent(event)"
@@ -62,7 +63,6 @@
6263
cy="50"
6364
r="48"
6465
fill="none"
65-
6666
style="stroke: black; stroke-width: 3px;"
6767
/>
6868
<circle cx="60" cy="60" r="50" fill="none" storke-style="#f60" />
@@ -81,14 +81,29 @@
8181
</li>
8282

8383
<li>
84-
<svg width="300" height="300">
85-
<circle
86-
cx="100"
87-
cy="100"
88-
r="50"
89-
fill="none"
90-
style="stroke: black;stroke-width: 3px;"
91-
></circle>
84+
<svg width="500" height="500">
85+
<linearGradient data-v-04637bab=""
86+
id="orange_red1" spreadMethod="pad" x1="0%" y1="0%" x2="100%" y2="0%">
87+
<stop data-v-04637bab=""
88+
offset="0%" style="stop-color: rgb(255, 198, 0); stop-opacity: 1;"></stop><stop data-v-04637bab="" offset="100%"
89+
style="stop-color: rgb(243, 36, 36); stop-opacity: 1;"></stop>
90+
</linearGradient>
91+
</defs>
92+
93+
<circle
94+
r="125" cx="50%" cy="50%"
95+
fill="none" stroke-width="10"
96+
class="circular-bg-path"
97+
style="stroke: url(&quot;#orange_red1&quot;);
98+
stroke-width: 10; stroke-dashoffset: 0; stroke-dasharray: 115.9, 785.398;">
99+
</circle>
100+
<circle r="125" cx="50%" cy="50%"
101+
fill="none" stroke-width="10" class="circular-bg-path"
102+
style="stroke: url(&quot;#orange_red1&quot;); stroke-width: 10; stroke-dashoffset: -130.9; stroke-dasharray: 246.799, 785.398;">
103+
</circle>
104+
<!-- <circle r="125" cx="50%" cy="50%" fill="none" stroke-width="10" class="circular-bg-path"
105+
style="stroke: url(&quot;#orange_red1&quot;); stroke-width: 10; stroke-dashoffset: -392.699; stroke-dasharray: 377.699, 785.398;">
106+
</circle> -->
92107
</svg>
93108
</li>
94109
</ul>
@@ -146,7 +161,7 @@
146161
// rotate.setAttribute('class' , 'rotate active');
147162
});
148163
};
149-
function onclickEvent(event){
150-
console.log(this,event)
164+
function onclickEvent(event) {
165+
console.log(this, event);
151166
}
152167
</script>

0 commit comments

Comments
 (0)