Cao Notedescription: "css动画：涌动的弹簧效果、超逼真的 3D 篮球弹跳，含挤压弹起模态、鼠标放 div 上，实现旋转、放大、移动等效果 等" tags: ["前端"]
css动画
涌动的弹簧效果
vue
<template>
<!-- 这是一个Vue组件的模板部分 -->
<div class="container">
<!-- 这里的div是一个容器，用于包裹下面的元素 -->
<div class="dajianshi">
<!-- 这个div可能是用于展示某种特定效果的元素，比如下面的一系列span可能与之相关联来形成特定视觉效果 -->
<span style="--tt:1;"></span>
<span style="--tt:2;"></span>
<span style="--tt:3;"></span>
<span style="--tt:4;"></span>
<span style="--tt:5;"></span>
<span style="--tt:6;"></span>
<span style="--tt:7;"></span>
<span style="--tt:8;"></span>
<span style="--tt:9;"></span>
</div>
</div>
</template>
<style scoped>
/* 这里是当前组件的局部样式定义，只作用于当前组件内的元素 */
.container {
/* 设置容器的高度为200px */
height: 200px;
/* 设置容器在上下方向有50px的外边距，并且水平方向自动居中 */
margin: 50px auto;
/* 设置容器的定位方式为相对定位，方便内部元素基于它进行定位等操作 */
position: relative;
}
.dajianshi {
/* 设置元素的定位方式为相对定位 */
position: relative;
/* 设置元素在上下方向的外边距，上外边距为200px，左右自动居中，下外边距为0 */
margin: 200px auto 0;
/* 设置元素的宽度为50px */
width: 50px;
/* 设置元素的高度为50px */
height: 50px;
/* 设置元素在进行3D变换时保留3D效果的样式属性 */
transform-style: preserve-3d;
/* 对元素进行3D透视变换，设置透视距离为500px，并且绕X轴旋转50度，沿Z轴平移50px */
transform: perspective(500px) rotateX(50deg) translateZ(50px);
}
.dajianshi span {
/* 设置span元素的定位方式为绝对定位，方便在其父元素（.dajianshi）内精确布局 */
position: absolute;
/* 通过CSS变量--tt来动态计算top的值，这里是根据--tt的值乘以-18px来设置top的偏移量 */
top: calc(-18px * var(--tt));
/* 通过CSS变量--tt来动态计算left的值，这里是根据--tt的值乘以-18px来设置left的偏移量 */
left: calc(-18px * var(--tt));
/* 通过CSS变量--tt来动态计算bottom的值，这里是根据--tt的值乘以-18px来设置bottom的偏移量 */
bottom: calc(-18px * var(--tt));
/* 通过CSS变量--tt来动态计算right的值，这里是根据--tt的值乘以-18px来设置right的偏移量 */
right: calc(-18px * var(--tt));
/* 设置span元素的边框样式，边框宽度为8px，颜色为半透明的黑色（透明度为0.8） */
border: 8px solid rgba(0, 0, 0, 0.8);
/* 设置span元素的边框圆角为50%，使其呈现圆形 */
border-radius: 50%;
/* 为span元素添加一个名为move的动画，动画持续时间为1.5秒，缓动效果为ease-in-out，循环播放且方向交替 */
animation: move 1.5s ease-in-out infinite alternate;
/* 通过CSS变量--tt来动态计算动画延迟时间，每个span元素的动画延迟时间根据--tt的值乘以0.1秒来设置 */
animation-delay: calc(var(--tt) * 0.1s);
}
@keyframes move {
/* 动画开始（0%）和结束（100%）时的关键帧，此时元素在Z轴方向平移0px */
0%,
100% {
transform: translateZ(0px);
}
/* 动画进行到50%时的关键帧，此时元素在Z轴方向平移-100px */
50% {
transform: translateZ(-100px);
}
}
</style><template>
<!-- 这是一个Vue组件的模板部分 -->
<div class="container">
<!-- 这里的div是一个容器，用于包裹下面的元素 -->
<div class="dajianshi">
<!-- 这个div可能是用于展示某种特定效果的元素，比如下面的一系列span可能与之相关联来形成特定视觉效果 -->
<span style="--tt:1;"></span>
<span style="--tt:2;"></span>
<span style="--tt:3;"></span>
<span style="--tt:4;"></span>
<span style="--tt:5;"></span>
<span style="--tt:6;"></span>
<span style="--tt:7;"></span>
<span style="--tt:8;"></span>
<span style="--tt:9;"></span>
</div>
</div>
</template>
<style scoped>
/* 这里是当前组件的局部样式定义，只作用于当前组件内的元素 */
.container {
/* 设置容器的高度为200px */
height: 200px;
/* 设置容器在上下方向有50px的外边距，并且水平方向自动居中 */
margin: 50px auto;
/* 设置容器的定位方式为相对定位，方便内部元素基于它进行定位等操作 */
position: relative;
}
.dajianshi {
/* 设置元素的定位方式为相对定位 */
position: relative;
/* 设置元素在上下方向的外边距，上外边距为200px，左右自动居中，下外边距为0 */
margin: 200px auto 0;
/* 设置元素的宽度为50px */
width: 50px;
/* 设置元素的高度为50px */
height: 50px;
/* 设置元素在进行3D变换时保留3D效果的样式属性 */
transform-style: preserve-3d;
/* 对元素进行3D透视变换，设置透视距离为500px，并且绕X轴旋转50度，沿Z轴平移50px */
transform: perspective(500px) rotateX(50deg) translateZ(50px);
}
.dajianshi span {
/* 设置span元素的定位方式为绝对定位，方便在其父元素（.dajianshi）内精确布局 */
position: absolute;
/* 通过CSS变量--tt来动态计算top的值，这里是根据--tt的值乘以-18px来设置top的偏移量 */
top: calc(-18px * var(--tt));
/* 通过CSS变量--tt来动态计算left的值，这里是根据--tt的值乘以-18px来设置left的偏移量 */
left: calc(-18px * var(--tt));
/* 通过CSS变量--tt来动态计算bottom的值，这里是根据--tt的值乘以-18px来设置bottom的偏移量 */
bottom: calc(-18px * var(--tt));
/* 通过CSS变量--tt来动态计算right的值，这里是根据--tt的值乘以-18px来设置right的偏移量 */
right: calc(-18px * var(--tt));
/* 设置span元素的边框样式，边框宽度为8px，颜色为半透明的黑色（透明度为0.8） */
border: 8px solid rgba(0, 0, 0, 0.8);
/* 设置span元素的边框圆角为50%，使其呈现圆形 */
border-radius: 50%;
/* 为span元素添加一个名为move的动画，动画持续时间为1.5秒，缓动效果为ease-in-out，循环播放且方向交替 */
animation: move 1.5s ease-in-out infinite alternate;
/* 通过CSS变量--tt来动态计算动画延迟时间，每个span元素的动画延迟时间根据--tt的值乘以0.1秒来设置 */
animation-delay: calc(var(--tt) * 0.1s);
}
@keyframes move {
/* 动画开始（0%）和结束（100%）时的关键帧，此时元素在Z轴方向平移0px */
0%,
100% {
transform: translateZ(0px);
}
/* 动画进行到50%时的关键帧，此时元素在Z轴方向平移-100px */
50% {
transform: translateZ(-100px);
}
}
</style>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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
超逼真的 3D 篮球弹跳，含挤压弹起模态
vue
<template>
<div class="dajianshi">
<div id="suport">
<div id="smash">
<div id="translateShadow">
<div id="light"></div>
<div id="rotateImg"></div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.dajianshi {
width: 100%;
height: 500px;
text-align: center;
position: relative;
}
#suport {
position: absolute;
bottom: 80px;
width: 100%;
text-align: center;
}
#smash {
animation-name: smash;
animation-duration: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
transform-origin: bottom;
}
#translateShadow,
#rotateImg,
#light {
border-radius: 50%;
display: inline-block;
width: 200px;
height: 200px;
}
#light {
background-image: radial-gradient(
circle at 20% 20%,
rgba(255, 221, 179, 0.7),
rgba(255, 221, 179, 0.5) 10%,
transparent 30%,
rgba(83, 42, 0, 0.8) 85%
);
position: absolute;
z-index: 1;
}
#translateShadow {
animation-name: translateShadow;
animation-duration: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
}
#rotateImg {
background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='75 75 251 251' fill='rgb(83,42,0)'><path d='M313.3,145.3c-14.4-29.3-38.8-50.5-67.1-61.6c-4.6-1.7-16.2-5.1-21.3-6.3 c-26.3-5.3-54.5-2.3-80.4,10.4c-30.2,14.8-52.9,40.6-63.8,72.5c-10.9,31.8-8.7,66,6.2,96.1l0.1,0.2c2.1,4.2,4.4,8.3,6.9,12.2l0,0 c0,0,0,0,0,0c23.6,36.9,64.4,58,106.5,58c18.7,0,37.6-4.1,55.4-12.9c30.2-14.8,52.9-40.6,63.8-72.5 C330.3,209.6,328.1,175.5,313.3,145.3z M238.3,86.2c25.2,12.5,41.2,36.6,46,68.5c-24.3,0.8-45.4-15.7-67.4-33.1 c-18.4-14.5-37.3-29.3-58.9-34.2C184.6,77.6,212.8,77.7,238.3,86.2z M85.4,161.9c10.4-30.6,32.2-55.3,61.2-69.6 c0.9-0.4,1.7-0.8,2.6-1.2c23.6,2.3,44.4,18.6,64.6,34.5c21.4,16.9,43.4,34.1,68.8,34.1c0.8,0,1.5,0,2.3-0.1c1,9.5,1.1,19.7,0.2,30.4 c-9.8-3.3-19.3-5.9-25.7-7.6c-37.6-9.8-79.7-16.1-112.5-16.7c-24-0.5-53,1.8-66,14.2C81.8,173.9,83.4,167.8,85.4,161.9z M91.4,254.4 l-0.1-0.2c-10.1-20.5-14.1-42.8-11.9-65l0.5,0.2c5.3-12.9,29-19.5,66.7-18.8c32.5,0.7,74.1,6.8,111.4,16.6 c10.1,2.6,18.9,5.3,26.5,7.8c-1.2,10.2-3.3,20.4-6.3,30.3c-19.8-8.8-48.7,2.6-81.8,15.7c-32,12.6-68.1,26.8-99.7,23 C94.9,261,93.1,257.7,91.4,254.4z M187.8,321.2c-34.6-3.6-67-21.9-87.5-51.7c31.8,2.4,66.9-11.4,98-23.7 c32.4-12.8,60.6-23.9,78.4-15.5c-5.6,17.2-13.6,33.4-23.5,47c-12.8,17.7-34.5,39.5-65.6,43.3L187.8,321.2z M253.5,309.4 c-15.6,7.7-32.1,11.6-48.4,12.3c36.2-12.4,62.8-49,76.1-88.8c9.1,6.7,14.2,20.1,15.8,40.6C285.7,288.6,270.9,300.9,253.5,309.4z M314.8,239.8c-3.3,9.8-7.8,19-13.3,27.4c-2.4-19.7-8.5-32.6-18.7-39.3c3.1-10.3,5.4-20.8,6.6-31.1c19.2,6.9,29.2,13.2,30.7,17.3 l0.4-0.2C319.6,222.6,317.7,231.3,314.8,239.8z M290,191.7c1.1-11.3,1-22.1-0.2-32.4c6.8-0.9,13.8-3,21.1-6.8l-2.3-4.5 c-6.8,3.4-13.2,5.4-19.5,6.3c-1.6-11.1-4.6-21.4-8.8-30.7c-4.6-10.3-10.8-19.2-18.3-26.6c19.5,11.6,36,28.7,46.8,50.5 c9.3,18.9,13.4,39.4,12.3,59.8C314.9,201.6,302.6,196.1,290,191.7z'/></svg>");
background-color: darkorange;
background-size: 100%;
animation-name: rotateImg;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes translateShadow {
0% {
transform: translateY(0);
box-shadow: 40px 40px 10px #444466;
}
100% {
transform: translateY(-205px);
box-shadow: 40px 350px 250px #444466;
}
}
@keyframes smash {
0% {
transform: scaleY(0.7);
}
15% {
transform: scaleY(1);
}
}
@keyframes rotateImg {
100% {
transform: rotate(360deg);
}
}
</style><template>
<div class="dajianshi">
<div id="suport">
<div id="smash">
<div id="translateShadow">
<div id="light"></div>
<div id="rotateImg"></div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.dajianshi {
width: 100%;
height: 500px;
text-align: center;
position: relative;
}
#suport {
position: absolute;
bottom: 80px;
width: 100%;
text-align: center;
}
#smash {
animation-name: smash;
animation-duration: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
transform-origin: bottom;
}
#translateShadow,
#rotateImg,
#light {
border-radius: 50%;
display: inline-block;
width: 200px;
height: 200px;
}
#light {
background-image: radial-gradient(
circle at 20% 20%,
rgba(255, 221, 179, 0.7),
rgba(255, 221, 179, 0.5) 10%,
transparent 30%,
rgba(83, 42, 0, 0.8) 85%
);
position: absolute;
z-index: 1;
}
#translateShadow {
animation-name: translateShadow;
animation-duration: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
}
#rotateImg {
background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='75 75 251 251' fill='rgb(83,42,0)'><path d='M313.3,145.3c-14.4-29.3-38.8-50.5-67.1-61.6c-4.6-1.7-16.2-5.1-21.3-6.3 c-26.3-5.3-54.5-2.3-80.4,10.4c-30.2,14.8-52.9,40.6-63.8,72.5c-10.9,31.8-8.7,66,6.2,96.1l0.1,0.2c2.1,4.2,4.4,8.3,6.9,12.2l0,0 c0,0,0,0,0,0c23.6,36.9,64.4,58,106.5,58c18.7,0,37.6-4.1,55.4-12.9c30.2-14.8,52.9-40.6,63.8-72.5 C330.3,209.6,328.1,175.5,313.3,145.3z M238.3,86.2c25.2,12.5,41.2,36.6,46,68.5c-24.3,0.8-45.4-15.7-67.4-33.1 c-18.4-14.5-37.3-29.3-58.9-34.2C184.6,77.6,212.8,77.7,238.3,86.2z M85.4,161.9c10.4-30.6,32.2-55.3,61.2-69.6 c0.9-0.4,1.7-0.8,2.6-1.2c23.6,2.3,44.4,18.6,64.6,34.5c21.4,16.9,43.4,34.1,68.8,34.1c0.8,0,1.5,0,2.3-0.1c1,9.5,1.1,19.7,0.2,30.4 c-9.8-3.3-19.3-5.9-25.7-7.6c-37.6-9.8-79.7-16.1-112.5-16.7c-24-0.5-53,1.8-66,14.2C81.8,173.9,83.4,167.8,85.4,161.9z M91.4,254.4 l-0.1-0.2c-10.1-20.5-14.1-42.8-11.9-65l0.5,0.2c5.3-12.9,29-19.5,66.7-18.8c32.5,0.7,74.1,6.8,111.4,16.6 c10.1,2.6,18.9,5.3,26.5,7.8c-1.2,10.2-3.3,20.4-6.3,30.3c-19.8-8.8-48.7,2.6-81.8,15.7c-32,12.6-68.1,26.8-99.7,23 C94.9,261,93.1,257.7,91.4,254.4z M187.8,321.2c-34.6-3.6-67-21.9-87.5-51.7c31.8,2.4,66.9-11.4,98-23.7 c32.4-12.8,60.6-23.9,78.4-15.5c-5.6,17.2-13.6,33.4-23.5,47c-12.8,17.7-34.5,39.5-65.6,43.3L187.8,321.2z M253.5,309.4 c-15.6,7.7-32.1,11.6-48.4,12.3c36.2-12.4,62.8-49,76.1-88.8c9.1,6.7,14.2,20.1,15.8,40.6C285.7,288.6,270.9,300.9,253.5,309.4z M314.8,239.8c-3.3,9.8-7.8,19-13.3,27.4c-2.4-19.7-8.5-32.6-18.7-39.3c3.1-10.3,5.4-20.8,6.6-31.1c19.2,6.9,29.2,13.2,30.7,17.3 l0.4-0.2C319.6,222.6,317.7,231.3,314.8,239.8z M290,191.7c1.1-11.3,1-22.1-0.2-32.4c6.8-0.9,13.8-3,21.1-6.8l-2.3-4.5 c-6.8,3.4-13.2,5.4-19.5,6.3c-1.6-11.1-4.6-21.4-8.8-30.7c-4.6-10.3-10.8-19.2-18.3-26.6c19.5,11.6,36,28.7,46.8,50.5 c9.3,18.9,13.4,39.4,12.3,59.8C314.9,201.6,302.6,196.1,290,191.7z'/></svg>");
background-color: darkorange;
background-size: 100%;
animation-name: rotateImg;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes translateShadow {
0% {
transform: translateY(0);
box-shadow: 40px 40px 10px #444466;
}
100% {
transform: translateY(-205px);
box-shadow: 40px 350px 250px #444466;
}
}
@keyframes smash {
0% {
transform: scaleY(0.7);
}
15% {
transform: scaleY(1);
}
}
@keyframes rotateImg {
100% {
transform: rotate(360deg);
}
}
</style>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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
鼠标放 div 上，实现旋转、放大、移动等效果
360°旋转
放大
旋转放大
上下左右移动
vue
<template>
<div style="width:640px ; margin:0 auto;">
<div class="itemBox img1">360°旋转</div>
<div class="itemBox img2">放大</div>
<div class="itemBox img3">旋转放大</div>
<div class="itemBox img4">上下左右移动</div>
</div>
</template>
<style scoped>
.itemBox {
width: 120px;
height: 120px;
line-height: 120px;
margin: 20px;
background-color: #5cb85c;
float: left;
font-size: 12px;
text-align: center;
color: #fff;
cursor: pointer;
}
/*效果一：360°旋转 修改rotate(旋转度数)*/
.img1 {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
}
.img1:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
/*效果二：放大 修改scale(放大的值)*/
.img2 {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
}
.img2:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
}
/*效果三：旋转放大 修改rotate(旋转度数) scale(放大值)*/
.img3 {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
}
.img3:hover {
transform: rotate(360deg) scale(1.2);
-webkit-transform: rotate(360deg) scale(1.2);
-moz-transform: rotate(360deg) scale(1.2);
-o-transform: rotate(360deg) scale(1.2);
-ms-transform: rotate(360deg) scale(1.2);
}
/*效果四：上下左右移动 修改translate(x轴,y轴)*/
.img4 {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
}
.img4:hover {
transform: translate(0, -10px);
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-o-transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
}
</style><template>
<div style="width:640px ; margin:0 auto;">
<div class="itemBox img1">360°旋转</div>
<div class="itemBox img2">放大</div>
<div class="itemBox img3">旋转放大</div>
<div class="itemBox img4">上下左右移动</div>
</div>
</template>
<style scoped>
.itemBox {
width: 120px;
height: 120px;
line-height: 120px;
margin: 20px;
background-color: #5cb85c;
float: left;
font-size: 12px;
text-align: center;
color: #fff;
cursor: pointer;
}
/*效果一：360°旋转 修改rotate(旋转度数)*/
.img1 {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
}
.img1:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
/*效果二：放大 修改scale(放大的值)*/
.img2 {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
}
.img2:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
}
/*效果三：旋转放大 修改rotate(旋转度数) scale(放大值)*/
.img3 {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
}
.img3:hover {
transform: rotate(360deg) scale(1.2);
-webkit-transform: rotate(360deg) scale(1.2);
-moz-transform: rotate(360deg) scale(1.2);
-o-transform: rotate(360deg) scale(1.2);
-ms-transform: rotate(360deg) scale(1.2);
}
/*效果四：上下左右移动 修改translate(x轴,y轴)*/
.img4 {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
}
.img4:hover {
transform: translate(0, -10px);
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-o-transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
}
</style>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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
花样的鼠标悬停效果
vue
<template>
<div style="width:640px ; margin:0 auto; background:#222222;">
<button class="fill">Fill In</button>
<button class="pulse">Pulse</button>
<button class="close">Close</button>
<button class="raise">Raise</button>
<button class="up">Fill Up</button>
<button class="slide">Slide</button>
<button class="offset">Offset</button>
</div>
</template>
<style scoped>
.fill:hover,
.fill:focus {
box-shadow: inset 0 0 0 2em var(--hover);
}
.pulse:hover,
.pulse:focus {
-webkit-animation: pulse 1s;
animation: pulse 1s;
box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
}
@-webkit-keyframes pulse {
0% {
box-shadow: 0 0 0 0 var(--hover);
}
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 var(--hover);
}
}
.close:hover,
.close:focus {
box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover);
}
.raise:hover,
.raise:focus {
box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
-webkit-transform: translateY(-0.25em);
transform: translateY(-0.25em);
}
.up:hover,
.up:focus {
box-shadow: inset 0 -3.25em 0 0 var(--hover);
}
.slide:hover,
.slide:focus {
box-shadow: inset 6.5em 0 0 0 var(--hover);
}
.offset {
box-shadow: 0.3em 0.3em 0 0 var(--color), inset 0.3em 0.3em 0 0 var(--color);
}
.offset:hover,
.offset:focus {
box-shadow: 0 0 0 0 var(--hover), inset 6em 3.5em 0 0 var(--hover);
}
.fill {
--color: #a972cb;
--hover: #cb72aa;
}
.pulse {
--color: #ef6eae;
--hover: #ef8f6e;
}
.close {
--color: #ff7f82;
--hover: #ffdc7f;
}
.raise {
--color: #ffa260;
--hover: #e5ff60;
}
.up {
--color: #e4cb58;
--hover: #94e458;
}
.slide {
--color: #8fc866;
--hover: #66c887;
}
.offset {
--color: #19bc8b;
--hover: #1973bc;
}
button {
color: var(--color);
-webkit-transition: 0.25s;
transition: 0.25s;
}
button:hover,
button:focus {
border-color: var(--hover);
color: #fff;
}
button {
background: none;
border: 2px solid;
font: inherit;
line-height: 1;
margin: 0.5em;
padding: 1em 2em;
}
</style><template>
<div style="width:640px ; margin:0 auto; background:#222222;">
<button class="fill">Fill In</button>
<button class="pulse">Pulse</button>
<button class="close">Close</button>
<button class="raise">Raise</button>
<button class="up">Fill Up</button>
<button class="slide">Slide</button>
<button class="offset">Offset</button>
</div>
</template>
<style scoped>
.fill:hover,
.fill:focus {
box-shadow: inset 0 0 0 2em var(--hover);
}
.pulse:hover,
.pulse:focus {
-webkit-animation: pulse 1s;
animation: pulse 1s;
box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
}
@-webkit-keyframes pulse {
0% {
box-shadow: 0 0 0 0 var(--hover);
}
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 var(--hover);
}
}
.close:hover,
.close:focus {
box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover);
}
.raise:hover,
.raise:focus {
box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
-webkit-transform: translateY(-0.25em);
transform: translateY(-0.25em);
}
.up:hover,
.up:focus {
box-shadow: inset 0 -3.25em 0 0 var(--hover);
}
.slide:hover,
.slide:focus {
box-shadow: inset 6.5em 0 0 0 var(--hover);
}
.offset {
box-shadow: 0.3em 0.3em 0 0 var(--color), inset 0.3em 0.3em 0 0 var(--color);
}
.offset:hover,
.offset:focus {
box-shadow: 0 0 0 0 var(--hover), inset 6em 3.5em 0 0 var(--hover);
}
.fill {
--color: #a972cb;
--hover: #cb72aa;
}
.pulse {
--color: #ef6eae;
--hover: #ef8f6e;
}
.close {
--color: #ff7f82;
--hover: #ffdc7f;
}
.raise {
--color: #ffa260;
--hover: #e5ff60;
}
.up {
--color: #e4cb58;
--hover: #94e458;
}
.slide {
--color: #8fc866;
--hover: #66c887;
}
.offset {
--color: #19bc8b;
--hover: #1973bc;
}
button {
color: var(--color);
-webkit-transition: 0.25s;
transition: 0.25s;
}
button:hover,
button:focus {
border-color: var(--hover);
color: #fff;
}
button {
background: none;
border: 2px solid;
font: inherit;
line-height: 1;
margin: 0.5em;
padding: 1em 2em;
}
</style>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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
太阳、地球、月球之间的绕转动画
vue
<template>
<div class="box">
<div class="sunline">
<div class="sun"></div>
<div class="earthline">
<div class="earth"></div>
<div class="moon"></div>
</div>
</div>
</div>
</template>
<style scoped>
.box {
-webkit-transform: scale(0.5);
transform: scale(0.5);
position: relative;
padding: 1px;
height: 400px;
width: 300px;
margin-left: 180px;
}
.sunline {
position: relative;
height: 400px;
width: 400px;
border: 2px solid black;
border-radius: 50%;
margin: 50px 0 0 50px;
-webkit-animation: rotate 10s infinite linear;
animation: rotate 10s infinite linear;
}
.sun {
height: 100px;
width: 100px;
margin: 50% 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: red;
border-radius: 50%;
-webkit-box-shadow: 5px 5px 10px red, -5px -5px 10px red, 5px -5px 10px red, -5px 5px 10px red;
box-shadow: 5px 5px 10px red, -5px -5px 10px red, 5px -5px 10px red, -5px 5px 10px red;
}
.earthline {
position: absolute;
right: 0;
top: 50%;
height: 200px;
width: 200px;
margin: -100px -100px 0 0;
border: 1px solid black;
border-radius: 50%;
-webkit-animation: rotate 2s infinite linear;
animation: rotate 2s infinite linear;
}
.earth {
margin: 50% 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
}
.moon {
position: absolute;
left: 0;
top: 50%;
height: 20px;
width: 20px;
margin: -10px 0 0 -10px;
background-color: black;
border-radius: 50%;
}
@-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
</style><template>
<div class="box">
<div class="sunline">
<div class="sun"></div>
<div class="earthline">
<div class="earth"></div>
<div class="moon"></div>
</div>
</div>
</div>
</template>
<style scoped>
.box {
-webkit-transform: scale(0.5);
transform: scale(0.5);
position: relative;
padding: 1px;
height: 400px;
width: 300px;
margin-left: 180px;
}
.sunline {
position: relative;
height: 400px;
width: 400px;
border: 2px solid black;
border-radius: 50%;
margin: 50px 0 0 50px;
-webkit-animation: rotate 10s infinite linear;
animation: rotate 10s infinite linear;
}
.sun {
height: 100px;
width: 100px;
margin: 50% 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: red;
border-radius: 50%;
-webkit-box-shadow: 5px 5px 10px red, -5px -5px 10px red, 5px -5px 10px red, -5px 5px 10px red;
box-shadow: 5px 5px 10px red, -5px -5px 10px red, 5px -5px 10px red, -5px 5px 10px red;
}
.earthline {
position: absolute;
right: 0;
top: 50%;
height: 200px;
width: 200px;
margin: -100px -100px 0 0;
border: 1px solid black;
border-radius: 50%;
-webkit-animation: rotate 2s infinite linear;
animation: rotate 2s infinite linear;
}
.earth {
margin: 50% 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
}
.moon {
position: absolute;
left: 0;
top: 50%;
height: 20px;
width: 20px;
margin: -10px 0 0 -10px;
background-color: black;
border-radius: 50%;
}
@-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
</style>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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
不断跳动的心形
vue
<template>
<div class="container">
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
</div>
</template>
<style scoped>
.container {
height: 580px;
margin: 50px auto;
position: relative;
}
.heart {
position: relative;
width: 120px;
height: 90px;
margin: 90px 50px;
float: left;
}
.heart::before,
.heart::after {
content: '';
position: absolute;
top: 40px;
width: 52px;
height: 80px;
border-radius: 50px 50px 0 0;
background: red;
}
.heart::before {
left: 50px;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart::after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
/* 定义动画 */
@keyframes beat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
/* 应用动画 */
.heart {
animation: beat 1s infinite;
}
</style><template>
<div class="container">
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
</div>
</template>
<style scoped>
.container {
height: 580px;
margin: 50px auto;
position: relative;
}
.heart {
position: relative;
width: 120px;
height: 90px;
margin: 90px 50px;
float: left;
}
.heart::before,
.heart::after {
content: '';
position: absolute;
top: 40px;
width: 52px;
height: 80px;
border-radius: 50px 50px 0 0;
background: red;
}
.heart::before {
left: 50px;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart::after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
/* 定义动画 */
@keyframes beat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
/* 应用动画 */
.heart {
animation: beat 1s infinite;
}
</style>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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
音频波纹加载律动
vue
<template>
<div class="dajianshi ">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</template>
<style scoped>
.dajianshi {
margin: 50px auto;
width: 200px;
height: 120px;
display: flex;
}
.dajianshi span {
width: 10px;
border-radius: 18px;
margin-right: 20px;
}
.dajianshi span:nth-child(1) {
animation: bar1 2s 0.2s infinite linear;
}
.dajianshi span:nth-child(2) {
animation: bar2 2s 0.4s infinite linear;
}
.dajianshi span:nth-child(3) {
animation: bar3 2s 0.6s infinite linear;
}
.dajianshi span:nth-child(4) {
animation: bar4 2s 0.8s infinite linear;
}
.dajianshi span:nth-child(5) {
animation: bar5 2s 1s infinite linear;
}
.dajianshi span:nth-child(6) {
animation: bar6 2s 1.2s infinite linear;
}
.dajianshi span:nth-child(7) {
animation: bar7 2s 1.4s infinite linear;
}
.dajianshi span:nth-child(8) {
animation: bar8 2s 1.6s infinite linear;
}
.dajianshi span:nth-child(9) {
animation: bar9 2s 1.8s infinite linear;
}
@keyframes bar1 {
0% {
background: #f677b0;
margin-top: 25%;
height: 10%;
}
50% {
background: #f677b0;
height: 100%;
margin-top: 0%;
}
100% {
background: #f677b0;
height: 10%;
margin-top: 25%;
}
}
@keyframes bar2 {
0% {
background: #df7ff2;
margin-top: 25%;
height: 10%;
}
50% {
background: #df7ff2;
height: 100%;
margin-top: 0%;
}
100% {
background: #df7ff2;
height: 10%;
margin-top: 25%;
}
}
@keyframes bar3 {
0% {
background: #8c7ff2;
margin-top: 25%;
height: 10%;
}
50% {
background: #8c7ff2;
height: 100%;
margin-top: 0%;
}
100% {
background: #8c7ff2;
height: 10%;
margin-top: 25%;
}
}
@keyframes bar4 {
0% {
background: #7fd0f2;
margin-top: 25%;
height: 10%;
}
50% {
background: #7fd0f2;
height: 100%;
margin-top: 0%;
}
100% {
background: #7fd0f2;
height: 10%;
margin-top: 25%;
}
}
@keyframes bar5 {
0% {
background: #7ff2d3;
margin-top: 25%;
height: 10%;
}
50% {
background: #7ff2d3;
height: 100%;
margin-top: 0%;
}
100% {
background: #7ff2d3;
height: 10%;
margin-top: 25%;
}
}
</style><template>
<div class="dajianshi ">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</template>
<style scoped>
.dajianshi {
margin: 50px auto;
width: 200px;
height: 120px;
display: flex;
}
.dajianshi span {
width: 10px;
border-radius: 18px;
margin-right: 20px;
}
.dajianshi span:nth-child(1) {
animation: bar1 2s 0.2s infinite linear;
}
.dajianshi span:nth-child(2) {
animation: bar2 2s 0.4s infinite linear;
}
.dajianshi span:nth-child(3) {
animation: bar3 2s 0.6s infinite linear;
}
.dajianshi span:nth-child(4) {
animation: bar4 2s 0.8s infinite linear;
}
.dajianshi span:nth-child(5) {
animation: bar5 2s 1s infinite linear;
}
.dajianshi span:nth-child(6) {
animation: bar6 2s 1.2s infinite linear;
}
.dajianshi span:nth-child(7) {
animation: bar7 2s 1.4s infinite linear;
}
.dajianshi span:nth-child(8) {
animation: bar8 2s 1.6s infinite linear;
}
.dajianshi span:nth-child(9) {
animation: bar9 2s 1.8s infinite linear;
}
@keyframes bar1 {
0% {
background: #f677b0;
margin-top: 25%;
height: 10%;
}
50% {
background: #f677b0;
height: 100%;
margin-top: 0%;
}
100% {
background: #f677b0;
height: 10%;
margin-top: 25%;
}
}
@keyframes bar2 {
0% {
background: #df7ff2;
margin-top: 25%;
height: 10%;
}
50% {
background: #df7ff2;
height: 100%;
margin-top: 0%;
}
100% {
background: #df7ff2;
height: 10%;
margin-top: 25%;
}
}
@keyframes bar3 {
0% {
background: #8c7ff2;
margin-top: 25%;
height: 10%;
}
50% {
background: #8c7ff2;
height: 100%;
margin-top: 0%;
}
100% {
background: #8c7ff2;
height: 10%;
margin-top: 25%;
}
}
@keyframes bar4 {
0% {
background: #7fd0f2;
margin-top: 25%;
height: 10%;
}
50% {
background: #7fd0f2;
height: 100%;
margin-top: 0%;
}
100% {
background: #7fd0f2;
height: 10%;
margin-top: 25%;
}
}
@keyframes bar5 {
0% {
background: #7ff2d3;
margin-top: 25%;
height: 10%;
}
50% {
background: #7ff2d3;
height: 100%;
margin-top: 0%;
}
100% {
background: #7ff2d3;
height: 10%;
margin-top: 25%;
}
}
</style>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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
文字颜色渐变的流光效果
音频波纹加载律动
vue
<template>
<div class="dajianshi">音频波纹加载律动</div>
</template>
<style scoped>
.dajianshi {
margin-top: 10px;
font-size: 80px;
background: -webkit-linear-gradient(
75deg,
#2eaf8d,
#2f6ae6 25%,
#347ba6 50%,
#16d225 55%,
#4cc410 60%,
#bb2c10 80%,
#2f63a4 95%,
#28dfd4
);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: flowCss 5s infinite linear;
}
@-webkit-keyframes dajianshiFlow {
0% {
/* 移动背景位置 */
background-position: 0 0;
}
100% {
background-position: -400% 0;
}
}
.dajianshi:hover {
-webkit-animation: dajianshiFlow 3s infinite linear;
}
</style><template>
<div class="dajianshi">音频波纹加载律动</div>
</template>
<style scoped>
.dajianshi {
margin-top: 10px;
font-size: 80px;
background: -webkit-linear-gradient(
75deg,
#2eaf8d,
#2f6ae6 25%,
#347ba6 50%,
#16d225 55%,
#4cc410 60%,
#bb2c10 80%,
#2f63a4 95%,
#28dfd4
);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: flowCss 5s infinite linear;
}
@-webkit-keyframes dajianshiFlow {
0% {
/* 移动背景位置 */
background-position: 0 0;
}
100% {
background-position: -400% 0;
}
}
.dajianshi:hover {
-webkit-animation: dajianshiFlow 3s infinite linear;
}
</style>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
36
37
38
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
36
37
38
边框线条环绕流动效果
环绕流动
vue
<template>
<div class="dajianshi">
环绕流动
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</template>
<style scoped>
.dajianshi {
width: 420px;
height: 210px;
margin: 100px auto;
line-height: 210px;
text-align: center;
font-size: 40px;
position: relative;
overflow: hidden;
border-radius: 10px;
}
.line {
position: absolute;
}
.line:nth-child(1) {
top: 0;
left: 0;
width: 100%;
height: 15px;
background: linear-gradient(90deg, transparent, blue);
animation: animate1 8s linear infinite;
}
@keyframes animate1 {
0% {
left: -100%;
}
50%,
100% {
left: 100%;
}
}
.line:nth-child(2) {
top: -100%;
right: 0;
width: 15px;
height: 100%;
background: linear-gradient(180deg, transparent, red);
animation: animate2 8s linear infinite;
/* 注意要加上延时触发动画效果，这样线条才会依次触发 */
animation-delay: 2s;
}
@keyframes animate2 {
0% {
top: -100%;
}
50%,
100% {
top: 100%;
}
}
.line:nth-child(3) {
bottom: 0;
right: 0;
width: 100%;
background: linear-gradient(270deg, transparent, orange);
animation: animate3 8s linear infinite;
animation-delay: 4s;
}
@keyframes animate3 {
0% {
right: -100%;
height: 15px;
}
50%,
100% {
height: 10px;
right: 100%;
}
}
.line:nth-child(4) {
bottom: -100%;
left: 0;
width: 15px;
height: 100%;
background: linear-gradient(360deg, transparent, #f0f);
animation: animate4 8s linear infinite;
animation-delay: 6s;
}
@keyframes animate4 {
0% {
bottom: -100%;
}
50%,
100% {
bottom: 100%;
}
}
</style><template>
<div class="dajianshi">
环绕流动
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</template>
<style scoped>
.dajianshi {
width: 420px;
height: 210px;
margin: 100px auto;
line-height: 210px;
text-align: center;
font-size: 40px;
position: relative;
overflow: hidden;
border-radius: 10px;
}
.line {
position: absolute;
}
.line:nth-child(1) {
top: 0;
left: 0;
width: 100%;
height: 15px;
background: linear-gradient(90deg, transparent, blue);
animation: animate1 8s linear infinite;
}
@keyframes animate1 {
0% {
left: -100%;
}
50%,
100% {
left: 100%;
}
}
.line:nth-child(2) {
top: -100%;
right: 0;
width: 15px;
height: 100%;
background: linear-gradient(180deg, transparent, red);
animation: animate2 8s linear infinite;
/* 注意要加上延时触发动画效果，这样线条才会依次触发 */
animation-delay: 2s;
}
@keyframes animate2 {
0% {
top: -100%;
}
50%,
100% {
top: 100%;
}
}
.line:nth-child(3) {
bottom: 0;
right: 0;
width: 100%;
background: linear-gradient(270deg, transparent, orange);
animation: animate3 8s linear infinite;
animation-delay: 4s;
}
@keyframes animate3 {
0% {
right: -100%;
height: 15px;
}
50%,
100% {
height: 10px;
right: 100%;
}
}
.line:nth-child(4) {
bottom: -100%;
left: 0;
width: 15px;
height: 100%;
background: linear-gradient(360deg, transparent, #f0f);
animation: animate4 8s linear infinite;
animation-delay: 6s;
}
@keyframes animate4 {
0% {
bottom: -100%;
}
50%,
100% {
bottom: 100%;
}
}
</style>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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
背景色彩不停流动效果
vue
<template>
<div class="dajianshi"></div>
</template>
<style scoped>
.dajianshi {
width: 420px;
height: 210px;
margin: 100px auto;
background: linear-gradient(145deg, #dae, #00f, #0f0, #f0f, #f00, #ff0);
background-size: 200% 200%;
animation: gradient 8s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0 15%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0 15%;
}
}
</style><template>
<div class="dajianshi"></div>
</template>
<style scoped>
.dajianshi {
width: 420px;
height: 210px;
margin: 100px auto;
background: linear-gradient(145deg, #dae, #00f, #0f0, #f0f, #f00, #ff0);
background-size: 200% 200%;
animation: gradient 8s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0 15%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0 15%;
}
}
</style>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
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
鼠标 hover 后左右开门的效果
嘿嘿
vue
<template>
<div class="dajianshi">
<div class="leftDoor"></div>
<div class="rightDoor"></div>
<div class="middle">嘿嘿</div>
</div>
</template>
<style scoped>
.dajianshi {
width: 320px;
height: 240px;
margin: 20px auto;
border: 1px solid #666;
perspective: 500px;
position: relative;
display: flex;
}
.leftDoor,
.rightDoor {
width: 50%;
height: 100%;
background-color: red;
transition: 1.2s;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #cde;
}
.leftDoor {
transform-origin: left;
}
.rightDoor {
transform-origin: right;
}
.dajianshi:hover .leftDoor {
transform: rotateY(-130deg);
}
.dajianshi:hover .rightDoor {
transform: rotateY(130deg);
}
.middle {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background-color: greenyellow;
display: flex;
justify-content: center;
align-items: center;
}
</style><template>
<div class="dajianshi">
<div class="leftDoor"></div>
<div class="rightDoor"></div>
<div class="middle">嘿嘿</div>
</div>
</template>
<style scoped>
.dajianshi {
width: 320px;
height: 240px;
margin: 20px auto;
border: 1px solid #666;
perspective: 500px;
position: relative;
display: flex;
}
.leftDoor,
.rightDoor {
width: 50%;
height: 100%;
background-color: red;
transition: 1.2s;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #cde;
}
.leftDoor {
transform-origin: left;
}
.rightDoor {
transform-origin: right;
}
.dajianshi:hover .leftDoor {
transform: rotateY(-130deg);
}
.dajianshi:hover .rightDoor {
transform: rotateY(130deg);
}
.middle {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background-color: greenyellow;
display: flex;
justify-content: center;
align-items: center;
}
</style>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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
模仿钟摆效果
vue
<template>
<div class="container">
<div class="dajianshi"></div>
</div>
</template>
<style scoped>
.container {
height: 500px;
margin: 50px auto;
position: relative;
}
.dajianshi {
margin: 100px auto 0;
width: 6px;
height: 240px;
background: gray;
border-radius: 8px;
position: relative;
animation: clock 3s linear infinite;
transform-origin: top;
}
/* 绘制摆球 */
.dajianshi::after {
content: '';
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #222;
position: absolute;
bottom: 0;
left: -20px;
}
/* 钟摆动画rotate旋转起来 */
@keyframes clock {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(50deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-50deg);
}
100% {
transform: rotate(0deg);
}
}
</style><template>
<div class="container">
<div class="dajianshi"></div>
</div>
</template>
<style scoped>
.container {
height: 500px;
margin: 50px auto;
position: relative;
}
.dajianshi {
margin: 100px auto 0;
width: 6px;
height: 240px;
background: gray;
border-radius: 8px;
position: relative;
animation: clock 3s linear infinite;
transform-origin: top;
}
/* 绘制摆球 */
.dajianshi::after {
content: '';
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #222;
position: absolute;
bottom: 0;
left: -20px;
}
/* 钟摆动画rotate旋转起来 */
@keyframes clock {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(50deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-50deg);
}
100% {
transform: rotate(0deg);
}
}
</style>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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
小球转圈圈加载效果
vue
<template>
<div class="container">
<div class="dajianshi">
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
</div>
</div>
</template>
<style scoped>
.container {
height: 300px;
margin: 50px auto;
position: relative;
}
.dajianshi {
margin: 100px auto;
width: 75px;
height: 75px;
position: relative;
}
.round {
position: absolute;
width: 19px;
height: 19px;
border-radius: 50%;
background-color: red;
animation: circleRound 2.8s ease infinite;
transform-origin: 50% 75px;
}
.round:nth-child(1) {
z-index: 7;
}
.round:nth-child(2) {
height: 18px;
width: 18px;
background-color: orange;
animation-delay: 0.2s;
z-index: 6;
}
.round:nth-child(3) {
height: 17px;
width: 17px;
background-color: yellow;
animation-delay: 0.4s;
z-index: 5;
}
.round:nth-child(4) {
height: 16px;
width: 16px;
background-color: green;
animation-delay: 0.6s;
z-index: 4;
}
.round:nth-child(5) {
height: 15px;
width: 15px;
background-color: cyan;
animation-delay: 0.8s;
z-index: 3;
}
.round:nth-child(6) {
height: 14px;
width: 14px;
background-color: blue;
animation-delay: 1s;
z-index: 2;
}
.round:nth-child(7) {
height: 13px;
width: 13px;
background-color: purple;
animation-delay: 1.2s;
z-index: 1;
}
@keyframes circleRound {
to {
transform: rotate(1turn);
}
}
</style><template>
<div class="container">
<div class="dajianshi">
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
</div>
</div>
</template>
<style scoped>
.container {
height: 300px;
margin: 50px auto;
position: relative;
}
.dajianshi {
margin: 100px auto;
width: 75px;
height: 75px;
position: relative;
}
.round {
position: absolute;
width: 19px;
height: 19px;
border-radius: 50%;
background-color: red;
animation: circleRound 2.8s ease infinite;
transform-origin: 50% 75px;
}
.round:nth-child(1) {
z-index: 7;
}
.round:nth-child(2) {
height: 18px;
width: 18px;
background-color: orange;
animation-delay: 0.2s;
z-index: 6;
}
.round:nth-child(3) {
height: 17px;
width: 17px;
background-color: yellow;
animation-delay: 0.4s;
z-index: 5;
}
.round:nth-child(4) {
height: 16px;
width: 16px;
background-color: green;
animation-delay: 0.6s;
z-index: 4;
}
.round:nth-child(5) {
height: 15px;
width: 15px;
background-color: cyan;
animation-delay: 0.8s;
z-index: 3;
}
.round:nth-child(6) {
height: 14px;
width: 14px;
background-color: blue;
animation-delay: 1s;
z-index: 2;
}
.round:nth-child(7) {
height: 13px;
width: 13px;
background-color: purple;
animation-delay: 1.2s;
z-index: 1;
}
@keyframes circleRound {
to {
transform: rotate(1turn);
}
}
</style>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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
球体涨水的效果
vue
<template>
<div class="dajianshi">
<ul>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
</ul>
</div>
</template>
<style scoped>
.dajianshi {
width: 100%;
height: 400px;
position: relative;
}
ul {
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
ul li {
list-style: none;
}
ul li span {
width: 120px;
height: 120px;
background-color: #fff;
text-align: center;
line-height: 120px;
margin: 0 10px;
display: block;
border-radius: 50%;
position: relative;
overflow: hidden;
border: 3px solid #cde;
z-index: 1;
}
ul li span:before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
transition: 0.5s;
z-index: 2;
}
ul li span:hover:before {
top: 0;
}
ul li:nth-child(1) span:before {
background: red;
}
ul li:nth-child(2) span:before {
background: orange;
}
ul li:nth-child(3) span:before {
background: yellow;
}
ul li:nth-child(4) span:before {
background: green;
}
</style><template>
<div class="dajianshi">
<ul>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
</ul>
</div>
</template>
<style scoped>
.dajianshi {
width: 100%;
height: 400px;
position: relative;
}
ul {
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
ul li {
list-style: none;
}
ul li span {
width: 120px;
height: 120px;
background-color: #fff;
text-align: center;
line-height: 120px;
margin: 0 10px;
display: block;
border-radius: 50%;
position: relative;
overflow: hidden;
border: 3px solid #cde;
z-index: 1;
}
ul li span:before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
transition: 0.5s;
z-index: 2;
}
ul li span:hover:before {
top: 0;
}
ul li:nth-child(1) span:before {
background: red;
}
ul li:nth-child(2) span:before {
background: orange;
}
ul li:nth-child(3) span:before {
background: yellow;
}
ul li:nth-child(4) span:before {
background: green;
}
</style>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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
蛇形左右扭动的效果
vue
<template>
<div class="container">
<div class="dajianshi">
<span style="--tt:1;"></span>
<span style="--tt:2;"></span>
<span style="--tt:3;"></span>
<span style="--tt:4;"></span>
<span style="--tt:5;"></span>
<span style="--tt:6;"></span>
<span style="--tt:7;"></span>
<span style="--tt:8;"></span>
<span style="--tt:9;"></span>
<span style="--tt:10;"></span>
<span style="--tt:11;"></span>
<span style="--tt:12;"></span>
<span style="--tt:13;"></span>
<span style="--tt:14;"></span>
<span style="--tt:15;"></span>
</div>
</div>
</template>
<style scoped>
.container {
height: 380px;
margin: 20px auto;
position: relative;
}
.dajianshi {
position: relative;
margin: 100px auto 0;
width: 50px;
height: 50px;
transform-style: preserve-3d;
transform: rotateY(60deg) translateZ(100px);
}
.dajianshi span {
position: absolute;
top: calc(20px * var(--tt));
left: calc(20px * var(--tt));
bottom: calc(20px * var(--tt));
right: calc(20px * var(--tt));
border: 7px solid rgba(0, 124, 0, 0.8);
border-radius: 50%;
animation: move 1.5s ease-in-out infinite alternate;
animation-delay: calc(var(--tt) * 0.1s);
}
@keyframes move {
0%,
100% {
transform: translateZ(0px);
}
50% {
transform: translateZ(-100px);
}
}
</style><template>
<div class="container">
<div class="dajianshi">
<span style="--tt:1;"></span>
<span style="--tt:2;"></span>
<span style="--tt:3;"></span>
<span style="--tt:4;"></span>
<span style="--tt:5;"></span>
<span style="--tt:6;"></span>
<span style="--tt:7;"></span>
<span style="--tt:8;"></span>
<span style="--tt:9;"></span>
<span style="--tt:10;"></span>
<span style="--tt:11;"></span>
<span style="--tt:12;"></span>
<span style="--tt:13;"></span>
<span style="--tt:14;"></span>
<span style="--tt:15;"></span>
</div>
</div>
</template>
<style scoped>
.container {
height: 380px;
margin: 20px auto;
position: relative;
}
.dajianshi {
position: relative;
margin: 100px auto 0;
width: 50px;
height: 50px;
transform-style: preserve-3d;
transform: rotateY(60deg) translateZ(100px);
}
.dajianshi span {
position: absolute;
top: calc(20px * var(--tt));
left: calc(20px * var(--tt));
bottom: calc(20px * var(--tt));
right: calc(20px * var(--tt));
border: 7px solid rgba(0, 124, 0, 0.8);
border-radius: 50%;
animation: move 1.5s ease-in-out infinite alternate;
animation-delay: calc(var(--tt) * 0.1s);
}
@keyframes move {
0%,
100% {
transform: translateZ(0px);
}
50% {
transform: translateZ(-100px);
}
}
</style>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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
小球抛物线效果
vue
<template>
<div class="container">
<div class="dajianshi"></div>
</div>
</template>
<style scoped>
.container {
height: 580px;
margin: 50px auto;
position: relative;
}
.top {
margin: 0 auto 0px;
padding: 10px 0;
background: blueviolet;
color: #fff;
}
.dajianshi {
height: 100px;
width: 100px;
border-radius: 50%;
position: absolute;
top: 40px;
left: 40px;
z-index: 10;
animation: to-h 2s 0.4s 1 linear;
animation-fill-mode: forwards;
}
.dajianshi:after {
content: '';
height: 100px;
width: 100px;
display: block;
border-radius: 50%;
background: radial-gradient(circle, #fff 20%, #888 60%, #000);
box-shadow: inset 0 0 50px #ddd, 0 0 50px rgba(0, 0, 0, 0.7);
animation: to-v 2s 0.4s 1 cubic-bezier(0.66, 0.1, 1, 0.41);
animation-fill-mode: forwards;
}
@keyframes to-v {
0% {
transform: translateY(40px);
}
100% {
transform: translateY(5000px);
}
}
@keyframes to-h {
0% {
transform: translateX(40px) scale(1);
}
100% {
transform: translateX(700px) scale(0.45);
}
}
</style><template>
<div class="container">
<div class="dajianshi"></div>
</div>
</template>
<style scoped>
.container {
height: 580px;
margin: 50px auto;
position: relative;
}
.top {
margin: 0 auto 0px;
padding: 10px 0;
background: blueviolet;
color: #fff;
}
.dajianshi {
height: 100px;
width: 100px;
border-radius: 50%;
position: absolute;
top: 40px;
left: 40px;
z-index: 10;
animation: to-h 2s 0.4s 1 linear;
animation-fill-mode: forwards;
}
.dajianshi:after {
content: '';
height: 100px;
width: 100px;
display: block;
border-radius: 50%;
background: radial-gradient(circle, #fff 20%, #888 60%, #000);
box-shadow: inset 0 0 50px #ddd, 0 0 50px rgba(0, 0, 0, 0.7);
animation: to-v 2s 0.4s 1 cubic-bezier(0.66, 0.1, 1, 0.41);
animation-fill-mode: forwards;
}
@keyframes to-v {
0% {
transform: translateY(40px);
}
100% {
transform: translateY(5000px);
}
}
@keyframes to-h {
0% {
transform: translateX(40px) scale(1);
}
100% {
transform: translateX(700px) scale(0.45);
}
}
</style>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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
文字聚光灯效果
文字聚光灯效果
vue
<template>
<div class="dajianshi">文字聚光灯效果</div>
</template>
<style scoped>
.dajianshi {
height: 200px;
margin: 10px auto 0;
position: relative;
color: #6b6868;
font-size: 50px;
line-height: 200px;
}
.dajianshi::after {
content: '文字聚光灯效果';
top: 0;
left: 20px;
position: absolute;
color: transparent;
background-image: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);
background-clip: text;
-webkit-background-clip: text;
clip-path: circle(100px at 0% 50%);
animation: movebg 3s linear alternate infinite;
}
@keyframes movebg {
0% {
clip-path: circle(100px at 0% 50%);
}
100% {
clip-path: circle(100px at 100% 50%);
}
}
</style><template>
<div class="dajianshi">文字聚光灯效果</div>
</template>
<style scoped>
.dajianshi {
height: 200px;
margin: 10px auto 0;
position: relative;
color: #6b6868;
font-size: 50px;
line-height: 200px;
}
.dajianshi::after {
content: '文字聚光灯效果';
top: 0;
left: 20px;
position: absolute;
color: transparent;
background-image: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);
background-clip: text;
-webkit-background-clip: text;
clip-path: circle(100px at 0% 50%);
animation: movebg 3s linear alternate infinite;
}
@keyframes movebg {
0% {
clip-path: circle(100px at 0% 50%);
}
100% {
clip-path: circle(100px at 100% 50%);
}
}
</style>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
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
旋转的通透立方体
vue
<template>
<div class="container">
<div class="dajianshi">
<div class="m1"></div>
<div class="m2"></div>
<div class="m3"></div>
<div class="m4"></div>
<div class="m5"></div>
<div class="m6"></div>
</div>
</div>
</template>
<style scoped>
.container {
height: 480px;
margin: 50px auto;
position: relative;
}
.dajianshi {
margin: 100px auto 0;
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: move 8s linear alternate infinite;
}
@keyframes move {
0% {
transform: rotateX(-30deg) rotateY(0deg);
}
100% {
transform: rotateX(-30deg) rotateY(360deg);
}
}
.m1,
.m2,
.m3,
.m4 {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.8;
background-image: linear-gradient(rgb(49, 255, 49), rgb(9, 255, 9));
}
.m1 {
transform: translateZ(100px);
}
.m2 {
transform: rotateY(180deg) translateZ(100px);
}
.m3 {
transform: rotateY(-90deg) translateZ(100px);
}
.m4 {
transform: rotateY(90deg) translateZ(100px);
}
.m5,
.m6 {
position: absolute;
width: 100%;
height: 100%;
}
.m5 {
transform: rotateX(90deg) translateZ(100px);
background-color: rgba(49, 150, 49, 0.1);
}
.m6 {
background-color: rgb(49, 255, 49);
transform: rotateX(-90deg) translateZ(250px);
box-shadow: 0 0 100px 30px rgb(9, 255, 9);
filter: blur(30px);
}
</style><template>
<div class="container">
<div class="dajianshi">
<div class="m1"></div>
<div class="m2"></div>
<div class="m3"></div>
<div class="m4"></div>
<div class="m5"></div>
<div class="m6"></div>
</div>
</div>
</template>
<style scoped>
.container {
height: 480px;
margin: 50px auto;
position: relative;
}
.dajianshi {
margin: 100px auto 0;
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: move 8s linear alternate infinite;
}
@keyframes move {
0% {
transform: rotateX(-30deg) rotateY(0deg);
}
100% {
transform: rotateX(-30deg) rotateY(360deg);
}
}
.m1,
.m2,
.m3,
.m4 {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.8;
background-image: linear-gradient(rgb(49, 255, 49), rgb(9, 255, 9));
}
.m1 {
transform: translateZ(100px);
}
.m2 {
transform: rotateY(180deg) translateZ(100px);
}
.m3 {
transform: rotateY(-90deg) translateZ(100px);
}
.m4 {
transform: rotateY(90deg) translateZ(100px);
}
.m5,
.m6 {
position: absolute;
width: 100%;
height: 100%;
}
.m5 {
transform: rotateX(90deg) translateZ(100px);
background-color: rgba(49, 150, 49, 0.1);
}
.m6 {
background-color: rgb(49, 255, 49);
transform: rotateX(-90deg) translateZ(250px);
box-shadow: 0 0 100px 30px rgb(9, 255, 9);
filter: blur(30px);
}
</style>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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
旋转的 loading 状态
vue
<template>
<div class="container">
<div class="dajianshi"></div>
</div>
</template>
<style scoped>
.container {
height: 280px;
margin: 50px auto;
position: relative;
}
.dajianshi {
width: 100px;
height: 100px;
margin: 100px auto 0;
border: 10px solid #eee;
border-top: 10px solid orange;
border-radius: 50%;
transition-property: transform;
animation-name: rotate;
animation-duration: 1.2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style><template>
<div class="container">
<div class="dajianshi"></div>
</div>
</template>
<style scoped>
.container {
height: 280px;
margin: 50px auto;
position: relative;
}
.dajianshi {
width: 100px;
height: 100px;
margin: 100px auto 0;
border: 10px solid #eee;
border-top: 10px solid orange;
border-radius: 50%;
transition-property: transform;
animation-name: rotate;
animation-duration: 1.2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>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
36
37
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
36
37
扇骨打开关闭的动画
vue
<template>
<div class="container">
<div class="dajianshi">
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
</div>
</div>
</template>
<style scoped>
.container {
height: 580px;
margin: 50px auto;
position: relative;
}
.dajianshi {
width: 100%;
height: 400px;
text-align: center;
position: relative;
}
.one {
width: 70px;
height: 280px;
position: absolute;
top: 100px;
border-radius: 5px;
border-top: solid 2px rgba(0, 0, 0, 0.2);
border-left: solid 3px rgba(255, 255, 255, 0.2);
border-bottom: solid 3px rgba(0, 0, 0, 0.2);
text-align: center;
box-sizing: border-box;
transform-origin: center 90%;
display: inline-block;
backface-visibility: hidden;
margin-left: -35px;
transform: rotate(0deg);
}
.one:before {
width: 16px;
height: 16px;
content: '';
background-color: white;
display: inline-block;
border-radius: 8px;
bottom: 10px;
position: absolute;
margin-left: -8px;
}
.one:nth-child(1) {
background-color: purple;
animation: purple-move 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.one:nth-child(2) {
background-color: blue;
animation: blue-move 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.one:nth-child(3) {
background-color: green;
animation: green-move 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.one:nth-child(4) {
background-color: yellow;
animation: yellow-move 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.one:nth-child(5) {
background-color: orange;
animation: orange-move 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.one:nth-child(6) {
background-color: red;
animation: red-move 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes purple-move {
0% {
transform: rotate(0deg);
}
30%,
70% {
transform: rotate(-60deg);
}
90%,
10% {
transform: rotate(0deg);
}
}
@keyframes blue-move {
0% {
transform: rotate(0deg);
}
30%,
70% {
transform: rotate(-40deg);
}
90%,
10% {
transform: rotate(0deg);
}
}
@keyframes green-move {
0% {
transform: rotate(0deg);
}
30%,
70% {
transform: rotate(-15deg);
}
90%,
10% {
transform: rotate(0deg);
}
}
@keyframes yellow-move {
0% {
transform: rotate(0deg);
}
30%,
70% {
transform: rotate(15deg);
}
90%,
10% {
transform: rotate(0deg);
}
}
@keyframes orange-move {
0% {
transform: rotate(0deg);
}
30%,
70% {
transform: rotate(40deg);
}
90%,
10% {
transform: rotate(0deg);
}
}
@keyframes red-move {
0% {
transform: rotate(0deg);
}
30%,
70% {
transform: rotate(60deg);
}
90%,
10% {
transform: rotate(0deg);
}
}
</style><template>
<div class="container">
<div class="dajianshi">
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
</div>
</div>
</template>
<style scoped>
.container {
height: 580px;
margin: 50px auto;
position: relative;
}
.dajianshi {
width: 100%;
height: 400px;
text-align: center;
position: relative;
}
.one {
width: 70px;
height: 280px;
position: absolute;
top: 100px;
border-radius: 5px;
border-top: solid 2px rgba(0, 0, 0, 0.2);
border-left: solid 3px rgba(255, 255, 255, 0.2);
border-bottom: solid 3px rgba(0, 0, 0, 0.2);
text-align: center;
box-sizing: border-box;
transform-origin: center 90%;
display: inline-block;
backface-visibility: hidden;
margin-left: -35px;
transform: rotate(0deg);
}
.one:before {
width: 16px;
height: 16px;
content: '';
background-color: white;
display: inline-block;
border-radius: 8px;
bottom: 10px;
position: absolute;
margin-left: -8px;
}
.one:nth-child(1) {
background-color: purple;
animation: purple-move 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.one:nth-child(2) {
background-color: blue;
animation: blue-move 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.one:nth-child(3) {
background-color: green;
animation: green-move 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.one:nth-child(4) {
background-color: yellow;
animation: yellow-move 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.one:nth-child(5) {
background-color: orange;
animation: orange-move 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.one:nth-child(6) {
background-color: red;
animation: red-move 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes purple-move {
0% {
transform: rotate(0deg);
}
30%,
70% {
transform: rotate(-60deg);
}
90%,
10% {
transform: rotate(0deg);
}
}
@keyframes blue-move {
0% {
transform: rotate(0deg);
}
30%,
70% {
transform: rotate(-40deg);
}
90%,
10% {
transform: rotate(0deg);
}
}
@keyframes green-move {
0% {
transform: rotate(0deg);
}
30%,
70% {
transform: rotate(-15deg);
}
90%,
10% {
transform: rotate(0deg);
}
}
@keyframes yellow-move {
0% {
transform: rotate(0deg);
}
30%,
70% {
transform: rotate(15deg);
}
90%,
10% {
transform: rotate(0deg);
}
}
@keyframes orange-move {
0% {
transform: rotate(0deg);
}
30%,
70% {
transform: rotate(40deg);
}
90%,
10% {
transform: rotate(0deg);
}
}
@keyframes red-move {
0% {
transform: rotate(0deg);
}
30%,
70% {
transform: rotate(60deg);
}
90%,
10% {
transform: rotate(0deg);
}
}
</style>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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
日蚀动画
vue
<template>
<div class="container">
<div class="dajianshi">
<div class="moon"></div>
</div>
</div>
</template>
<style scoped>
.container {
height: 600px;
margin: 50px auto;
}
.dajianshi {
width: 100%;
height: 500px;
position: relative;
/* background-color: #182C51; */
background-image: linear-gradient(30deg, #182c51, rgba(24, 44, 81, 0.53));
display: flex;
justify-content: center;
align-items: center;
z-index: -2;
}
.moon {
background-image: linear-gradient(30deg, rgba(24, 44, 81, 0.98), rgba(24, 44, 81, 0.93));
width: 256px;
height: 256px;
border-radius: 50%;
position: relative;
}
.moon::before {
content: '';
background-color: #c7938b;
position: absolute;
display: block;
height: 100%;
width: 100%;
border-radius: 50%;
z-index: -1;
animation: 3.2s cresent linear infinite alternate;
}
@keyframes cresent {
0% {
transform: translate(-30px, 30px) scale(0.9);
box-shadow: none;
}
50% {
transform: translate(0px, 0px) scale(1.02);
box-shadow: 0 0 10px #c7938b, 0 0 80px 8px #c7938b;
background-color: #efdbd8;
}
100% {
transform: translate(30px, -30px) scale(0.9);
box-shadow: none;
}
}
</style><template>
<div class="container">
<div class="dajianshi">
<div class="moon"></div>
</div>
</div>
</template>
<style scoped>
.container {
height: 600px;
margin: 50px auto;
}
.dajianshi {
width: 100%;
height: 500px;
position: relative;
/* background-color: #182C51; */
background-image: linear-gradient(30deg, #182c51, rgba(24, 44, 81, 0.53));
display: flex;
justify-content: center;
align-items: center;
z-index: -2;
}
.moon {
background-image: linear-gradient(30deg, rgba(24, 44, 81, 0.98), rgba(24, 44, 81, 0.93));
width: 256px;
height: 256px;
border-radius: 50%;
position: relative;
}
.moon::before {
content: '';
background-color: #c7938b;
position: absolute;
display: block;
height: 100%;
width: 100%;
border-radius: 50%;
z-index: -1;
animation: 3.2s cresent linear infinite alternate;
}
@keyframes cresent {
0% {
transform: translate(-30px, 30px) scale(0.9);
box-shadow: none;
}
50% {
transform: translate(0px, 0px) scale(1.02);
box-shadow: 0 0 10px #c7938b, 0 0 80px 8px #c7938b;
background-color: #efdbd8;
}
100% {
transform: translate(30px, -30px) scale(0.9);
box-shadow: none;
}
}
</style>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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
小狗狗
vue
<template>
<div class="container">
<div class="dajianshi">
<svg class="dog" xmlns="http://www.w3.org/2000/svg" viewBox="-50 0 1200 1080">
<ellipse
class="shadow"
ry="45"
rx="350"
cy="816"
cx="498"
opacity="1"
fill="#B2CAE8"
fill-opacity="1"
stroke="#B2CAE8"
stroke-width="4"
/>
<path
class="tail-blur"
fill="#6f5a4b"
d="M 180.265,568.972 14.092,504.432 C 40.893351,428.54412 92.941075,394.6756 159.419,390.74 l 29.972,170.684 c 1.155,6.575 -2.931,9.954 -9.126,7.548 z"
opacity=".296"
/>
<path
class="tail"
fill="#6f5a4b"
stroke="#6f5a4b"
stroke-width="12"
d="m 161.6285,568.63016 20.92664,-20.00034 C 151.50961,521.73829 14.092,504.432 14.092,504.432 c 0,0 128.8135,26.71916 147.5365,64.19816 z"
/>
<g class="back-legs">
<path
fill="#9b6e34"
d="M180.059 589.035h121.038l-23.651 219.517-58.432 2.217-38.955-221.734z"
/>
<path
fill="#9b6e34"
stroke="#9b6e34"
stroke-width="6"
d="M270.996 760.244c-28.22 0-51.088 22.555-51.536 50.525h103.071c-.447-27.97-23.315-50.525-51.535-50.525z"
/>
<path
fill="#bd8b4a"
d="M206.036 589.035h121.039l-23.651 219.517-58.433 2.217-38.955-221.734z"
/>
<path
fill="#bd8b4a"
stroke="#bd8b4a"
stroke-width="6"
d="M296.973 760.244c-28.219 0-51.088 22.555-51.535 50.525h103.071c-.447-27.97-23.316-50.525-51.536-50.525z"
/>
<path
fill="#9b6e34"
fill-opacity="1"
stroke="#9b6e34"
stroke-width="1"
d="m 341.34945,810.26154 c -1.48174,-30.60183 -20.2921,-36.5324 -23.61393,-35.8329 -1.37117,0.0393 21.53672,10.53459 17.96335,35.34867 z"
/>
</g>
<g class="front-legs">
<path
class="leg"
fill="#9b6e34"
d="m 640.90169,580.10511 119.14374,21.32995 -61.96529,211.91363 -57.90822,-8.11489 z"
/>
<path
fill="#9b6e34"
stroke="#9b6e34"
stroke-width="6"
d="m 711.354,758.244 c -28.22,0 -51.089,22.555 -51.536,50.525 h 103.071 c -0.447,-27.97 -23.316,-50.525 -51.535,-50.525 z"
/>
<path
fill="#bd8b4a"
fill-opacity="1"
stroke="#bd8b4a"
stroke-width="1"
d="m 760.35315,810.35988 c -1.48174,-30.60183 -20.2921,-36.5324 -23.61393,-35.8329 -1.37117,0.0393 21.53672,10.53459 17.96335,35.34867 z"
/>
<path
class="leg"
fill="#bd8b4a"
d="m 619.46642,579.5532 118.83259,23.00558 -64.94292,211.02015 -57.78921,-8.92963 z"
/>
<path
fill="#bd8b4a"
stroke="#bd8b4a"
stroke-width="6"
d="m 688.228,758.24364 c -56.81455,-1.81204 -59.84071,0.90112 -51.535,50.525 h 103.071 c -0.447,-27.97 -23.33034,-49.62541 -51.536,-50.525 z"
/>
<path
fill="#9b6e34"
fill-opacity="1"
stroke="#9b6e34"
stroke-width="1"
d="m 734.97661,810.43045 c -1.48174,-30.60183 -20.2921,-36.5324 -23.61393,-35.8329 -1.37117,0.0393 21.53672,10.53459 17.96335,35.34867 z"
/>
</g>
<g class="lean">
<g class="body">
<path
fill="#6f5a4b"
stroke="#6f5a4b"
stroke-width="3.25"
d="M751.059 361.906c0-29.802 45.436-69.614 45.436-69.614s49.234-43.162 87.533-43.162c73.437 0 111.791 39.402 111.791 101.686 0 31.044-9.528 61.914-28.18 85.07-18.769 23.303-46.777 38.795-83.611 38.795-73.437 0-132.969-50.491-132.969-112.775z"
/>
<path
fill="#6f5a4b"
stroke="#6f5a4b"
stroke-width="3.25"
d="M161.724 552.442c43.998-51.241 266.636-59.779 370.667-66.522 85.958-5.571 279.053-236.247 279.053-163.339 0 53.584 51.308 278.307-16.195 344.713-68.328 67.217-165.195 62.163-239.502 61.231-52.92-.663-131.793-11.253-226.832-15.838-77.24-3.727-120.165-11.768-152.525-38.198-41.065-33.54-39.869-92.695-14.666-122.047z"
/>
<path
fill="#695445"
stroke="#695445"
stroke-width="2.06"
d="M412.368 528.039l22.614-14.883c5.4-3.554 14.781-6.181 20.954-5.866l13.681.698c6.173.314 15.487 2.785 20.804 5.518l20.246 10.406c5.317 2.733 11.558 9.379 13.94 14.844l2.905 6.668c2.382 5.465 2.362 14.665-.044 20.548l-1.537 3.759c-2.406 5.883-8.735 13.532-14.136 17.084l-10.784 7.093c-5.401 3.552-13.927 9.649-19.044 13.617l-11.314 8.774c-5.116 3.969-14.146 8.913-20.168 11.043l-2.382.842c-6.022 2.13-15.885 3.458-22.029 2.966l-7.054-.565c-6.145-.492-16.135-1.112-22.313-1.384l-6.765-.298c-6.178-.273-15.545-2.626-20.922-5.256l-.197-.096c-5.376-2.63-9.598-9.753-9.43-15.91l.316-11.56c.169-6.157 3.685-15.154 7.854-20.095l27.479-32.565c4.169-4.941 11.926-11.828 17.326-15.382z"
/>
<path
fill="#695445"
stroke="#695445"
stroke-width="5"
d="M392.18 675.438l8.165-10.299c1.928-2.433 5.608-5.685 8.218-7.265l15.541-9.405c2.61-1.58 7.112-2.313 10.055-1.636l13.58 3.123c2.943.676 7.135 2.952 9.364 5.081l.26.249c2.229 2.13 6.286 2.86 9.063 1.631l4.337-1.919c2.776-1.229 7.431-2.671 10.398-3.221l2.133-.396c2.966-.55 7.647-.066 10.455 1.082l3.466 1.417c2.807 1.147 7.4 2.889 10.258 3.891l1.012.354c2.858 1.002 7.401 2.867 10.148 4.166l5.2 2.46c2.747 1.299 5.746 4.788 6.699 7.792l3.367 10.618c.953 3.003.26 7.492-1.548 10.025l-2.543 3.565c-1.808 2.533-5.672 5.067-8.631 5.66l-5.189 1.039c-2.96.592-7.792.868-10.795.615l-8.061-.678c-3.003-.252-7.719-1.371-10.534-2.498l-5.712-2.287c-2.815-1.127-7.323-.988-10.07.312l-5.201 2.46c-2.747 1.299-7.391 2.715-10.373 3.163l-5.106.767c-2.983.448-7.717-.001-10.574-1.002l-1.013-.355c-2.857-1.001-6.663-3.848-8.499-6.357l-.923-1.262c-1.837-2.509-5.753-4.827-8.747-5.177l-2.791-.326c-2.994-.35-7.652.409-10.405 1.695l-3.665 1.713c-2.753 1.286-6.27.145-7.855-2.547l-4.104-6.969c-1.586-2.692-1.308-6.847.62-9.279z"
/>
<path
fill="#695445"
stroke="#695445"
stroke-width="5"
d="M559.503 565.641l-6.595 16.23c-1.842 4.533-3.19 12.298-3.012 17.344l.375 10.576c.179 5.045 1.874 13.072 3.787 17.928l3.273 8.314c1.913 4.856 4.607 12.825 6.018 17.799l2.271 8.005c1.411 4.973 5.602 12.104 9.361 15.927l.137.14c3.759 3.823 10.993 6.882 16.159 6.833l1.542-.015c5.166-.049 11.579-3.345 14.325-7.361l1.801-2.633c2.746-4.016 4.7-11.368 4.364-16.42l-.529-7.952c-.336-5.053-1.859-13.16-3.402-18.108l-2.384-7.645c-1.543-4.948-2.962-13.051-3.17-18.098l-.145-3.513c-.208-5.047 2.286-12.052 5.569-15.646l6.804-7.445c3.283-3.594 7.962-9.9 10.45-14.085l1.031-1.735c2.488-4.185 3.56-11.641 2.394-16.653l-.216-.927c-1.166-5.012-6.322-9.396-11.516-9.793l-10.284-.786c-5.194-.397-12.79 1.392-16.967 3.995l-20.542 12.802c-4.177 2.604-9.056 8.389-10.899 12.922z"
/>
<path
fill="#695445"
stroke="#695445"
stroke-width="5"
d="M642.333 590.4l-3.736 1.374c-3.152 1.16-7.235 4.448-9.12 7.344l-3.019 4.638c-1.885 2.896-3.749 8.067-4.163 11.55l-.015.127c-.415 3.483 1.926 6.728 5.228 7.248l3.191.503c3.302.521 7.946-1.01 10.374-3.42l4.843-4.808c2.427-2.41 5.87-6.749 7.689-9.691l3.257-5.267c1.82-2.943.874-6.601-2.112-8.17l-1.304-.686c-2.987-1.569-7.962-1.902-11.113-.742z"
/>
<path
fill="#695445"
stroke="#695445"
stroke-width="5"
d="M735.821 570.473l-2.761 9.352c-1.12 3.793-3.295 9.799-4.859 13.415l-1.912 4.422c-1.563 3.615-3.549 9.676-4.436 13.537l-2.091 9.107c-.887 3.861-1.31 10.195-.946 14.149l.954 10.364c.364 3.953 3.168 9.004 6.264 11.282l3.938 2.898c3.095 2.278 8.576 3.343 12.242 2.38l4.903-1.289c3.666-.963 8.744-4.081 11.343-6.965l4.222-4.685c2.599-2.883 6.122-8.075 7.87-11.596l2.76-5.56c1.747-3.521 4.176-9.415 5.424-13.164l3.042-9.135 4.653-14.673a414.246 414.246 0 004.043-13.737l2.3-8.463c1.038-3.819 1.376-10.09.755-14.008l-.023-.144c-.621-3.917-3.056-9.592-5.439-12.675l-1.217-1.575c-2.383-3.083-7.372-5.776-11.144-6.016l-11.336-.723c-3.771-.24-8.689 2.123-10.985 5.278l-11.38 15.644c-2.295 3.155-5.064 8.787-6.184 12.58z"
/>
<path
fill="#695445"
stroke="#695445"
stroke-width="5"
d="M697.133 395.726l-4.154 1.378c-2.827.939-5.779 4.129-6.593 7.125l-1.595 5.868c-.814 2.997-.675 7.808.312 10.746l.971 2.893c.987 2.939 3.565 7.02 5.759 9.117l.387.37c2.194 2.096 4.591 6.236 5.355 9.247l.264 1.039a288.186 288.186 0 012.507 10.969l.023.111c.621 3.047 3.274 6.647 5.926 8.041l2.516 1.322c2.652 1.394 7.033 1.585 9.785.428l5.18-2.178c2.753-1.157 5.396-4.584 5.904-7.655l1.19-7.193c.508-3.07-.364-7.695-1.947-10.329l-3.356-5.586c-1.583-2.635-4.712-6.388-6.99-8.383l-.841-.737c-2.278-1.995-5.147-5.898-6.409-8.717l-3.774-8.429-2.901-6.099c-1.326-2.788-4.692-4.287-7.519-3.348z"
/>
<path
fill="#6a503e"
stroke="#6a503e"
stroke-width="3.25"
d="M664.861 644.439l1.313 5.522c.683 2.872 2.629 7.103 4.346 9.449l1.356 1.853c1.717 2.346 3.796 6.537 4.645 9.36l1.473 4.904c.848 2.823 2.802 7.108 4.364 9.571l.402.634c1.562 2.463 5.043 5.042 7.776 5.76l2.224.584c2.732.718 7.126.585 9.814-.298l2.384-.783c2.688-.883 6.21-3.54 7.867-5.934l.06-.088c1.657-2.394 2.471-6.669 1.818-9.549l-1.424-6.29c-.653-2.88-3.028-6.626-5.306-8.368l-.083-.063c-2.278-1.741-6.306-3.859-8.998-4.729l-.098-.032c-2.692-.871-5.008-3.972-5.174-6.928l-.158-2.832c-.165-2.955-1.169-7.57-2.241-10.307l-1.419-3.622c-1.072-2.737-4.224-4.956-7.041-4.956h-6.464c-2.816 0-6.365 1.996-7.928 4.46l-1.916 3.022c-1.563 2.463-2.275 6.788-1.592 9.66z"
/>
<path
fill="#6a503e"
stroke="#6a503e"
stroke-width="3.25"
d="M613.467 486.952l7.154-8.311c1.998-2.322 5.741-5.413 8.36-6.904l8.694-4.95c2.619-1.491 7.156-2.7 10.135-2.7h8.149c2.978 0 7.667.854 10.472 1.907l11.049 4.148c2.805 1.053 7.038 3.39 9.456 5.219l10.181 7.706c2.417 1.829 5.195 5.7 6.204 8.646l3.163 9.236c1.009 2.946.788 7.625-.492 10.452l-2.937 6.483c-1.28 2.826-4.478 6.253-7.142 7.653l-7.016 3.687c-2.664 1.4-7.216 2.192-10.167 1.769l-5.975-.856c-2.952-.423-6.793-2.796-8.58-5.301l-.345-.484c-1.787-2.504-5.598-5.058-8.513-5.703l-3.836-.848c-2.914-.645-7.667-1.527-10.616-1.97l-5.228-.785c-2.948-.443-7.472-1.989-10.105-3.454l-3.343-1.861c-2.632-1.464-5.846-4.922-7.178-7.723l-2.75-5.781c-1.332-2.801-.792-6.953 1.206-9.275z"
/>
<path
fill="#695445"
stroke="#695445"
stroke-width="5"
d="M170.831 603.353l.036.168c.963 4.585 5.343 9.913 9.784 11.901l12.456 5.577c4.441 1.988 11.079 1.153 14.827-1.865l4.872-3.923c3.748-3.018 7.772-9.137 8.988-13.666l3.124-11.635c1.216-4.53 1.894-11.981 1.514-16.643l-1-12.27c-.38-4.662-4.47-9.615-9.135-11.063l-5.416-1.681c-4.666-1.448-10.599.567-13.253 4.5l-23.735 35.178c-2.654 3.933-4.024 10.838-3.062 15.422z"
/>
<path
fill="#6a503e"
stroke="#6a503e"
stroke-width="3.25"
d="M241.079 650.195l-.098.182c-2.672 4.972-2.692 13.043-.044 18.026l1.093 2.057c2.648 4.983 9.433 10.007 15.156 11.221l.725.153c5.722 1.214 15.037 1.391 20.805.395l2.519-.435c5.769-.995 14.813-3.586 20.201-5.786l10.199-4.164c5.388-2.201 6.741-7.484 3.021-11.802l-4.975-5.775c-3.719-4.318-11.378-6.853-17.106-5.663l-1.416.294c-5.727 1.189-14.926.866-20.546-.723l-14.52-4.105c-5.62-1.589-12.342 1.154-15.014 6.125z"
/>
<path
fill="#695445"
stroke="#695445"
stroke-width="2.06"
d="M285.533 601.722l2.531.752c6.313 1.873 16.766 2.894 23.347 2.279l6.145-.573c6.58-.615 14.577-5.546 17.861-11.015l4.963-8.266c3.283-5.47 7.431-14.811 9.264-20.865l.956-3.156c1.833-6.054.418-15.257-3.16-20.555l-.131-.194c-3.579-5.299-11.835-9.374-18.442-9.102l-.497.02c-6.606.272-16.544 3.142-22.196 6.412l-2.648 1.531c-5.652 3.269-13.729 9.793-18.04 14.57l-.678.751c-4.311 4.778-12.358 11.347-17.974 14.673l-5.244 3.106c-5.616 3.326-11.168 11.041-12.401 17.231l-.352 1.765c-1.233 6.191.669 15.504 4.248 20.802l.131.194c3.578 5.299 9.196 5.191 12.548-.241l2.269-3.676c3.351-5.432 11.186-8.316 17.5-6.443z"
/>
<path
fill="#ff4e47"
stroke="#ff4e47"
stroke-width="28"
d="M 707.78417,358.59878 846.34934,503.2334"
/>
</g>
<g class="head">
<path
fill="#bd8b4a"
d="M911.034 474.462l58.711 25.635c3.998 1.746 10.859 2.947 15.323 2.683l8.328-.493c4.465-.264 10.914-2.315 14.884-4.112l7.47-3.676c3.97-1.797 10.92-4.795 14.4-7.235l14.84-10.392c3.48-2.441 8.1-7.154 10.33-10.528l7.47-11.338c2.22-3.374 3.57-6.514 3.01-7.015 0 0-89.032-79.584-89.326-80.524"
/>
<path
fill="#bd8b4a"
d="M913.883 547.305C869.89 505.578 853.078 442.761 876.334 407c23.255-35.762 77.772-30.925 121.766 10.802 43.99 41.727 62.76 40.306 62.76 40.306-23.26 35.762-102.983 130.924-146.977 89.197z"
/>
<path
fill="#bd8b4a"
d="m 878.57469,361.46519 c -3.549,8.006 18.32731,62.81481 18.32731,62.81481 0,0 -5.576,45.517 7.976,50.611 1.64,0.617 9.306,-0.397 19.932,-4.902 30.681,-13.007 85.9,-42.08 90.94,-42.892 3.24,-0.523 -36.398,-6.798 -33.634,-8.579 11.678,-7.525 16.195,-66.177 16.195,-66.177 0,0 0.84,-18.025 -3.737,-33.088 -3.332,-10.962 -11.307,-21.389 -20.966,-26.835 -4.181,-2.358 -8.527,-2.554 -13.033,-3.118 -9.386,-1.176 -17.697,-0.873 -26.857,2.227 -20.387,6.897 -64.15231,47.92519 -55.14331,69.93819"
/>
<g class="eye">
<ellipse
ry="58.79958"
rx="63.385227"
cy="337.63333"
cx="930.31775"
opacity="1"
fill="#6f5a4b"
fill-opacity="1"
stroke="#6f5a4b"
stroke-width="7"
/>
<path
fill="#fff"
stroke="#fff"
stroke-width="3.25"
d="M917.372 339.256c0-19.15 15.843-34.674 35.388-34.674 19.544 0 35.388 15.524 35.388 34.674 0 19.149-15.844 34.673-35.388 34.673-12.483 0-23.457-6.332-29.757-15.898a34.015 34.015 0 01-5.631-18.775z"
/>
<path
fill="#262626"
stroke="#262626"
d="M953.463 334.106c0-8.041 6.456-14.56 14.421-14.56 7.965 0 14.421 6.519 14.421 14.56s-6.456 14.559-14.421 14.559c-7.965 0-14.421-6.518-14.421-14.559z"
/>
<path
fill="#fff"
stroke="#fff"
stroke-width="5"
d="M972.119 327.418c0-.661.711-1.197 1.589-1.197.877 0 1.589.536 1.589 1.197s-.712 1.197-1.589 1.197c-.878 0-1.589-.536-1.589-1.197z"
/>
<g class="closed-eye" fill="#6a503e" stroke="#4a392c" stroke-width="3">
<path
d="M917.003 339.068c0-19.357 16.007-35.048 35.754-35.048 19.746 0 35.753 15.691 35.753 35.048 0 19.356-16.007 35.048-35.753 35.048-12.612 0-23.699-6.401-30.064-16.07a34.386 34.386 0 01-5.69-18.978z"
/>
<path
d="M923.322 358.879c.132-4.19 10.549-11.275 13.553-13.265 11.34-7.511 24.072-11.238 37.223-13.485 4.288-.732 8.655-.216 12.924-.697"
/>
</g>
</g>
<g class="nose">
<path
fill="#4a392c"
d="M1035.88 441.045c5.38-8.889 16.28-12.745 24.36-8.614 8.08 4.131 10.27 14.686 4.89 23.574-5.38 8.889-16.29 12.746-24.37 8.615-8.07-4.131-10.26-14.686-4.88-23.575z"
/>
<path
fill="#fff"
stroke="#fff"
stroke-width="1.74"
d="M1051.34 441.56c.03 2.329 2.27-.018 2.64-1.768.18-.862-1.8 2-.93 2.516 1.16.684 2.36-2.411 1.42-3.282-2.95-2.722-2.72 7.429-1.07 3.998 1.03-2.155-5.45 3.379-3.62-2.029 2.85-8.382 9.1 2.281 2.45 3.226-4.55.645-3.63-8.619 2.7-6.739 4.48 1.33-.01 5.966-3.4 5.448-5.35-.818.82-8.238 3.9-4.094"
opacity=".965"
/>
</g>
<g>
<path
class="ball"
fill="#bdf971"
stroke="#bdf971"
d="m 930.80242,477.19065 c -13.05851,3.00801 -24.77881,15.97694 -26.81485,30.67673 -2.03603,14.69979 5.61282,31.12503 15.54844,43.47271 9.93563,12.34768 22.15522,20.61485 36.12779,24.29677 13.97258,3.68192 29.69644,2.77869 42.91157,-2.81649 13.21513,-5.59518 23.92113,-15.88139 30.65943,-28.14324 6.7383,-12.26185 9.5079,-26.49697 5.7369,-38.5172 -3.771,-12.02022 -14.0825,-21.82316 -25.5603,-24.46605 -11.47786,-2.6429 -24.12011,1.87601 -37.63861,0.6591 -13.5185,-1.21691 -27.91187,-8.17033 -40.97037,-5.16233 z"
/>
<clipPath id="ballClip">
<path
class="ball"
fill="#bdf971"
stroke="#bdf971"
d="m 930.80242,477.19065 c -13.05851,3.00801 -24.77881,15.97694 -26.81485,30.67673 -2.03603,14.69979 5.61282,31.12503 15.54844,43.47271 9.93563,12.34768 22.15522,20.61485 36.12779,24.29677 13.97258,3.68192 29.69644,2.77869 42.91157,-2.81649 13.21513,-5.59518 23.92113,-15.88139 30.65943,-28.14324 6.7383,-12.26185 9.5079,-26.49697 5.7369,-38.5172 -3.771,-12.02022 -14.0825,-21.82316 -25.5603,-24.46605 -11.47786,-2.6429 -24.12011,1.87601 -37.63861,0.6591 -13.5185,-1.21691 -27.91187,-8.17033 -40.97037,-5.16233 z"
/>
</clipPath>
<path
class="ball-decoration"
clip-path="url(#ballClip)"
fill="none"
stroke="#fff"
stroke-width="4"
d="m 963.39546,597.71943 c 21.49913,-19.30313 4.80913,-64.80408 16.71919,-83.46282 16.19467,-25.37116 67.93925,-22.92156 89.43095,-47.68524"
/>
<g class="ball-sound">
<path
fill="none"
stroke="#B5D8E8"
stroke-width="4"
d="m 1096.3827,564.72204 c 11.3886,12.59779 6.8073,-1.45406 10.931,-3.9212 1.9116,-1.14344 5.2815,9.1526 9.7911,16.39495 0.2794,0.44804 0.3148,-1.06074 0.4718,-1.59122 0.9548,-3.21847 1.6781,-12.7846 4.2464,-14.32081 2.4235,-1.4498 4.5316,8.986 8.6637,9.21558 5.7286,0.31843 3.6488,-6.24515 5.8457,-8.73267 1.4614,-1.65478 3.9233,1.78478 6.0289,1.62906 4.8167,-0.35637 4.1527,-6.99656 8.0084,0.44507"
/>
<path
fill="none"
stroke="#B5D8E8"
stroke-width="4"
d="m 1070.9116,599.79298 c -2.9954,2.45576 -9.6186,6.11285 -7.2109,10.56543 0.5391,0.99715 13.1337,-2.24375 13.7587,-2.44022 0.5954,-0.18689 1.7073,-1.42002 1.6666,-0.90122 -0.083,1.06689 -3.3427,7.9055 -1.5136,9.15131 2.703,1.84098 10.413,-0.47946 10.1532,2.84261 -0.344,4.40226 -7.7885,9.49729 -5.8163,13.14464 1.3149,2.43155 6.6186,0.47256 9.456,1.55305 4.0577,1.54512 -3.7339,7.61167 2.5171,8.63834"
/>
</g>
</g>
<path
fill="#695445"
stroke="#695445"
stroke-width="3.25"
d="M894.558 290.191l5.447-7.287c.796-1.066 2.311-2.539 3.384-3.291l5.204-3.647c1.073-.751 2.934-1.708 4.157-2.137l6.932-2.428c1.223-.429 3.224-.493 4.47-.144l6.85 1.92c1.246.349 2.667 1.642 3.175 2.888l.433 1.062c.508 1.245.24 3.089-.599 4.118l-1.506 1.847c-.839 1.029-2.454 2.354-3.608 2.961l-8.515 4.475-3.971 2.087c-1.154.606-2.741 1.956-3.547 3.014l-4.601 6.045-3.025 3.71c-.839 1.029-2.558 1.984-3.839 2.134l-2.176.254c-1.282.15-3.06-.506-3.971-1.464l-.486-.51c-.912-.959-2.018-2.764-2.47-4.033l-.633-1.774c-.453-1.269-.408-3.307.1-4.553l.433-1.062c.508-1.246 1.565-3.119 2.362-4.185z"
/>
<g class="ear">
<path
fill="#554132"
d="M899.667 340.093c-18.458-82.741-41.446-100.776-75.085-74.525-35.063 27.363-93.432 28.614-74.975 111.355 18.457 82.741 67.012 141.572 108.449 131.401 41.438-10.17 60.068-85.49 41.611-168.231z"
/>
<path
fill="#4a392c"
stroke="#4a392c"
stroke-width="3.55"
d="M771.398 397.916l-.417 2.678c-.344 2.211.02 5.69.813 7.77l.614 1.609c.793 2.08 2.61 5.099 4.059 6.743l1.036 1.176a113.619 113.619 0 005.474 5.712l3.036 2.913c1.575 1.511 3.888 4.189 5.167 5.981l.047.066c1.279 1.793 3.799 4.178 5.63 5.327l1.699 1.067c1.83 1.149 4.911 2.774 6.881 3.629l6.158 2.674 6.859 2.695c1.997.784 5.282 1.902 7.338 2.497l3.679 1.064c2.056.595 5.445 1.213 7.571 1.38l6.965.549 9.208.371c2.13.086 5.581.038 7.709-.108l2.904-.199c2.128-.145 5.485-.858 7.499-1.592l3.653-1.331c2.014-.734 5.05-2.389 6.781-3.697l5.562-4.202c1.731-1.308 3.794-4.047 4.608-6.118l1.07-2.723c.814-2.071 1.239-5.549.949-7.769l-.289-2.215c-.29-2.22-1.202-5.691-2.037-7.753l-.359-.885c-.835-2.062-2.629-5.119-4.008-6.829l-3.889-4.823-3.114-4.076c-1.335-1.747-4.006-3.877-5.966-4.758l-1.023-.46c-1.96-.881-5.239-1.978-7.323-2.451l-4.892-1.109-4.17-1.093a107.68 107.68 0 01-7.401-2.285l-3.915-1.398a183.715 183.715 0 01-7.245-2.794l-5.752-2.388c-1.983-.823-5.273-1.906-7.348-2.418l-2.754-.681a176.174 176.174 0 01-7.466-2.057l-10.622-3.234-5.07-1.592c-2.043-.642-5.417-1.359-7.536-1.602l-1.639-.188c-2.119-.243-4.799 1.069-5.986 2.931l-.779 1.223c-1.187 1.861-2.653 5.108-3.275 7.251l-.912 3.142c-.622 2.143-2.333 5.18-3.822 6.784l-.64.688c-1.489 1.604-2.976 4.696-3.32 6.908z"
/>
<path
fill="#6a503e"
stroke="#6a503e"
stroke-width="3.25"
d="M818.613 319.578l-3.003 6.664c-.639 1.418-1.214 3.839-1.284 5.407l-.428 9.507-.135 10.621.142 9.336c.024 1.569.501 4.019 1.066 5.472l2.902 7.46c.565 1.453 1.687 3.695 2.506 5.007l2.82 4.52c.819 1.312 2.465 3.12 3.676 4.038l3.88 2.939c1.211.918 3.402 1.601 4.893 1.525l3.803-.193c1.491-.076 3.62-.964 4.755-1.984l4.39-3.945c1.135-1.02 2.43-3.056 2.892-4.549l1.583-5.112c.462-1.493 1.038-3.957 1.287-5.505l1.136-7.078c.248-1.548.456-4.075.464-5.644l.045-8.997c.008-1.569-.242-4.085-.558-5.619l-1.903-9.229c-.316-1.534-1.056-3.944-1.652-5.383l-2.468-5.954c-.596-1.439-1.866-3.573-2.836-4.766l-3.753-4.614c-.97-1.193-2.94-2.43-4.399-2.762l-3.66-.833c-1.459-.332-3.767-.131-5.154.449l-3.538 1.479c-1.387.58-3.354 1.964-4.393 3.092l-.038.041c-1.039 1.127-2.399 3.191-3.038 4.61z"
/>
<path
fill="#695445"
stroke="#695445"
stroke-width="2.06"
d="M828.818 330.254l-.037.064c-1.036 1.741-2.292 4.758-2.806 6.739l-.411 1.584c-.514 1.981-1.088 5.243-1.282 7.286l-.054.563c-.194 2.043.417 5.154 1.366 6.949l.352.666c.948 1.795 3.275 2.952 5.197 2.584l1.372-.262c1.922-.367 4.493-1.943 5.744-3.521l3.045-3.841c1.251-1.578 2.908-4.378 3.701-6.254l.157-.37c.793-1.877 1.747-5.03 2.13-7.043l.127-.671c.384-2.013-.603-4.6-2.203-5.777l-1.779-1.309c-1.601-1.178-4.463-1.879-6.394-1.567l-2.854.462c-1.931.312-4.335 1.977-5.371 3.718z"
/>
</g>
</g>
</g>
</svg>
</div>
</div>
</template>
<style scoped>
.container {
height: 600px;
margin: 50px auto;
position: relative;
}
.dajianshi {
width: 100%;
height: 500px;
text-align: center;
position: relative;
}
.dog {
height: 25rem;
max-height: 80vh;
max-width: 80vw;
}
.ear,
.closed-eye,
.lean,
.front-legs,
.leg,
.head,
.tail,
.tail-blur,
.shadow {
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.ball,
.ball-decoration,
.ball-sound {
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.ball {
animation-name: squishBall;
transform: matrix(1.0951654, 0.52195853, -0.52866476, 1.2371611, 208.27138, -632.28196);
}
@keyframes squishBall {
0%,
50%,
72%,
80%,
92%,
100% {
d: path(
'm 930.80242,477.19065 c -13.05851,3.00801 -24.77881,15.97694 -26.81485,30.67673 -2.03603,14.69979 5.61282,31.12503 15.54844,43.47271 9.93563,12.34768 22.15522,20.61485 36.12779,24.29677 13.97258,3.68192 29.69644,2.77869 42.91157,-2.81649 13.21513,-5.59518 23.92113,-15.88139 30.65943,-28.14324 6.7383,-12.26185 9.5079,-26.49697 5.7369,-38.5172 -3.771,-12.02022 -14.0825,-21.82316 -25.5603,-24.46605 -11.47786,-2.6429 -24.12011,1.87601 -37.63861,0.6591 -13.5185,-1.21691 -27.91187,-8.17033 -40.97037,-5.16233 z'
);
transform: matrix(1.0951654, 0.52195853, -0.52866476, 1.2371611, 208.27138, -632.28196);
}
65%,
85% {
d: path(
'm 932.4158,479.26229 c -14.67189,0.93637 -26.39219,13.9053 -28.42823,28.60509 -2.03603,14.69979 5.61282,31.12503 15.94228,38.97676 10.32947,7.85173 23.3365,7.12856 34.39281,10.90173 11.0563,3.77318 20.16082,12.04166 33.72906,12.76579 13.56828,0.72414 31.59878,-6.09489 42.72528,-18.16177 11.1265,-12.06689 15.3474,-29.37891 10.9229,-43.93943 -4.4245,-14.56052 -17.4943,-26.36654 -28.8312,-27.22343 -11.337,-0.85689 -20.93852,9.23684 -34.54977,8.73602 -13.61125,-0.50082 -31.23124,-11.59712 -45.90313,-10.66076 z'
);
transform: matrix(1.0951654, 0.52195853, -0.52866476, 1.2371611, 208.27138, -642.28196);
}
}
.ball-decoration {
animation-name: ballDecorationAnimation;
}
@keyframes ballDecorationAnimation {
0%,
50%,
72%,
80%,
92%,
100% {
d: path(
'm 963.39546,597.71943 c 21.49913,-19.30313 4.80913,-64.80408 16.71919,-83.46282 16.19467,-25.37116 67.93925,-22.92156 89.43095,-47.68524'
);
}
65%,
85% {
d: path(
'm 978.40243,581.77452 c 21.49916,-19.30313 -15.82546,-51.20401 -3.9154,-69.86275 16.19467,-25.37116 63.71847,-19.16982 85.21017,-43.9335'
);
}
}
.ball-sound {
animation-name: ballSound;
visibility: hidden;
}
@keyframes ballSound {
0%,
60%,
70%,
80%,
90%,
100% {
visibility: hidden;
transform: translateY(0);
}
65%,
67%,
69%,
85%,
87%,
89% {
visibility: visible;
transform: translateY(-3px);
}
66%,
68%,
86%,
88% {
visibility: visible;
transform: translateY(3px);
}
}
.ear {
animation-name: moveEar;
transform-origin: top center;
transform-box: fill-box;
}
@keyframes moveEar {
0%,
12%,
21%,
31%,
35%,
100% {
transform: rotateZ(0);
}
9%,
19%,
29% {
transform: rotateZ(-5deg);
transform: rotateZ(-10deg);
}
13%,
23%,
33% {
transform: rotateZ(5deg);
transform: rotateZ(10deg);
}
}
.closed-eye {
animation-name: closeEye;
}
@keyframes closeEye {
0%,
50%,
100% {
visibility: hidden;
}
10% {
visibility: visible;
}
}
.lean {
animation-name: leanDown;
transform-origin: center;
}
@keyframes leanDown {
0%,
50%,
100% {
transform: rotateZ(0) translateY(0);
}
60%,
90% {
transform: rotateZ(10deg) translateY(5%);
}
}
.front-legs {
animation-name: flexLegs;
}
@keyframes flexLegs {
0%,
50%,
100% {
transform: translateX(0);
}
60%,
90% {
transform: translateX(12%);
}
}
.leg {
animation-name: rotateLegs;
transform-origin: bottom left;
transform-box: fill-box;
transform: translateX(16%) rotate(-10deg);
}
@keyframes rotateLegs {
0%,
50%,
100% {
transform: translateX(16%) rotate(-10deg);
}
60%,
90% {
transform: translateX(35%) rotate(-83deg);
}
}
.head {
animation-name: lookDown;
transform-origin: top right;
transform-box: fill-box;
}
@keyframes lookDown {
0%,
55%,
100% {
transform: rotateZ(0) translate(0, 0);
}
60%,
90% {
transform: rotateZ(5deg) translate(2.5%, 6%);
}
}
.tail {
animation-name: moveTail;
transform-origin: bottom center;
}
@keyframes moveTail {
0%,
50%,
90%,
100% {
d: path(
'm 161.6285,568.63016 20.92664,-20.00034 C 151.50961,521.73829 14.092,504.432 14.092,504.432 c 0,0 128.8135,26.71916 147.5365,64.19816 z'
);
}
64%,
70%,
76%,
82% {
d: path(
'm 161.6285,568.63016 20.92664,-20.00034 C 151.50961,521.73829 77.565044,422.94078 77.565044,422.94078 c 0,0 65.340456,108.21038 84.063456,145.68938 z'
);
}
60%,
66%,
72%,
78%,
84% {
d: path(
'm 161.6285,568.63016 20.92664,-20.00034 C 151.50961,521.73829 14.092,504.432 14.092,504.432 c 0,0 128.8135,26.71916 147.5365,64.19816 z'
);
}
62%,
68%,
74%,
80%,
86% {
d: path(
'm 161.6285,568.63016 20.92664,-20.00034 C 151.50961,521.73829 159.419,390.74 159.419,390.74 c 0,0 -16.5135,140.41116 2.2095,177.89016 z'
);
}
}
.tail-blur {
animation-name: tailBlur;
transform-origin: bottom center;
}
@keyframes tailBlur {
0%,
59%,
90%,
100% {
opacity: 0;
}
64%,
70%,
76%,
82% {
transform: rotate(-2deg);
opacity: 0;
}
60%,
66%,
72%,
78%,
84% {
opacity: 0.3;
}
62%,
68%,
74%,
80%,
86% {
transform: rotate(2deg);
opacity: 0;
}
}
.shadow {
animation-name: scaleShadow;
transform-origin: center center;
}
@keyframes scaleShadow {
0%,
55%,
100% {
transform: scaleX(1) translateX(0);
}
60%,
90% {
transform: scaleX(1.1) translateX(4%);
}
}
</style><template>
<div class="container">
<div class="dajianshi">
<svg class="dog" xmlns="http://www.w3.org/2000/svg" viewBox="-50 0 1200 1080">
<ellipse
class="shadow"
ry="45"
rx="350"
cy="816"
cx="498"
opacity="1"
fill="#B2CAE8"
fill-opacity="1"
stroke="#B2CAE8"
stroke-width="4"
/>
<path
class="tail-blur"
fill="#6f5a4b"
d="M 180.265,568.972 14.092,504.432 C 40.893351,428.54412 92.941075,394.6756 159.419,390.74 l 29.972,170.684 c 1.155,6.575 -2.931,9.954 -9.126,7.548 z"
opacity=".296"
/>
<path
class="tail"
fill="#6f5a4b"
stroke="#6f5a4b"
stroke-width="12"
d="m 161.6285,568.63016 20.92664,-20.00034 C 151.50961,521.73829 14.092,504.432 14.092,504.432 c 0,0 128.8135,26.71916 147.5365,64.19816 z"
/>
<g class="back-legs">
<path
fill="#9b6e34"
d="M180.059 589.035h121.038l-23.651 219.517-58.432 2.217-38.955-221.734z"
/>
<path
fill="#9b6e34"
stroke="#9b6e34"
stroke-width="6"
d="M270.996 760.244c-28.22 0-51.088 22.555-51.536 50.525h103.071c-.447-27.97-23.315-50.525-51.535-50.525z"
/>
<path
fill="#bd8b4a"
d="M206.036 589.035h121.039l-23.651 219.517-58.433 2.217-38.955-221.734z"
/>
<path
fill="#bd8b4a"
stroke="#bd8b4a"
stroke-width="6"
d="M296.973 760.244c-28.219 0-51.088 22.555-51.535 50.525h103.071c-.447-27.97-23.316-50.525-51.536-50.525z"
/>
<path
fill="#9b6e34"
fill-opacity="1"
stroke="#9b6e34"
stroke-width="1"
d="m 341.34945,810.26154 c -1.48174,-30.60183 -20.2921,-36.5324 -23.61393,-35.8329 -1.37117,0.0393 21.53672,10.53459 17.96335,35.34867 z"
/>
</g>
<g class="front-legs">
<path
class="leg"
fill="#9b6e34"
d="m 640.90169,580.10511 119.14374,21.32995 -61.96529,211.91363 -57.90822,-8.11489 z"
/>
<path
fill="#9b6e34"
stroke="#9b6e34"
stroke-width="6"
d="m 711.354,758.244 c -28.22,0 -51.089,22.555 -51.536,50.525 h 103.071 c -0.447,-27.97 -23.316,-50.525 -51.535,-50.525 z"
/>
<path
fill="#bd8b4a"
fill-opacity="1"
stroke="#bd8b4a"
stroke-width="1"
d="m 760.35315,810.35988 c -1.48174,-30.60183 -20.2921,-36.5324 -23.61393,-35.8329 -1.37117,0.0393 21.53672,10.53459 17.96335,35.34867 z"
/>
<path
class="leg"
fill="#bd8b4a"
d="m 619.46642,579.5532 118.83259,23.00558 -64.94292,211.02015 -57.78921,-8.92963 z"
/>
<path
fill="#bd8b4a"
stroke="#bd8b4a"
stroke-width="6"
d="m 688.228,758.24364 c -56.81455,-1.81204 -59.84071,0.90112 -51.535,50.525 h 103.071 c -0.447,-27.97 -23.33034,-49.62541 -51.536,-50.525 z"
/>
<path
fill="#9b6e34"
fill-opacity="1"
stroke="#9b6e34"
stroke-width="1"
d="m 734.97661,810.43045 c -1.48174,-30.60183 -20.2921,-36.5324 -23.61393,-35.8329 -1.37117,0.0393 21.53672,10.53459 17.96335,35.34867 z"
/>
</g>
<g class="lean">
<g class="body">
<path
fill="#6f5a4b"
stroke="#6f5a4b"
stroke-width="3.25"
d="M751.059 361.906c0-29.802 45.436-69.614 45.436-69.614s49.234-43.162 87.533-43.162c73.437 0 111.791 39.402 111.791 101.686 0 31.044-9.528 61.914-28.18 85.07-18.769 23.303-46.777 38.795-83.611 38.795-73.437 0-132.969-50.491-132.969-112.775z"
/>
<path
fill="#6f5a4b"
stroke="#6f5a4b"
stroke-width="3.25"
d="M161.724 552.442c43.998-51.241 266.636-59.779 370.667-66.522 85.958-5.571 279.053-236.247 279.053-163.339 0 53.584 51.308 278.307-16.195 344.713-68.328 67.217-165.195 62.163-239.502 61.231-52.92-.663-131.793-11.253-226.832-15.838-77.24-3.727-120.165-11.768-152.525-38.198-41.065-33.54-39.869-92.695-14.666-122.047z"
/>
<path
fill="#695445"
stroke="#695445"
stroke-width="2.06"
d="M412.368 528.039l22.614-14.883c5.4-3.554 14.781-6.181 20.954-5.866l13.681.698c6.173.314 15.487 2.785 20.804 5.518l20.246 10.406c5.317 2.733 11.558 9.379 13.94 14.844l2.905 6.668c2.382 5.465 2.362 14.665-.044 20.548l-1.537 3.759c-2.406 5.883-8.735 13.532-14.136 17.084l-10.784 7.093c-5.401 3.552-13.927 9.649-19.044 13.617l-11.314 8.774c-5.116 3.969-14.146 8.913-20.168 11.043l-2.382.842c-6.022 2.13-15.885 3.458-22.029 2.966l-7.054-.565c-6.145-.492-16.135-1.112-22.313-1.384l-6.765-.298c-6.178-.273-15.545-2.626-20.922-5.256l-.197-.096c-5.376-2.63-9.598-9.753-9.43-15.91l.316-11.56c.169-6.157 3.685-15.154 7.854-20.095l27.479-32.565c4.169-4.941 11.926-11.828 17.326-15.382z"
/>
<path
fill="#695445"
stroke="#695445"
stroke-width="5"
d="M392.18 675.438l8.165-10.299c1.928-2.433 5.608-5.685 8.218-7.265l15.541-9.405c2.61-1.58 7.112-2.313 10.055-1.636l13.58 3.123c2.943.676 7.135 2.952 9.364 5.081l.26.249c2.229 2.13 6.286 2.86 9.063 1.631l4.337-1.919c2.776-1.229 7.431-2.671 10.398-3.221l2.133-.396c2.966-.55 7.647-.066 10.455 1.082l3.466 1.417c2.807 1.147 7.4 2.889 10.258 3.891l1.012.354c2.858 1.002 7.401 2.867 10.148 4.166l5.2 2.46c2.747 1.299 5.746 4.788 6.699 7.792l3.367 10.618c.953 3.003.26 7.492-1.548 10.025l-2.543 3.565c-1.808 2.533-5.672 5.067-8.631 5.66l-5.189 1.039c-2.96.592-7.792.868-10.795.615l-8.061-.678c-3.003-.252-7.719-1.371-10.534-2.498l-5.712-2.287c-2.815-1.127-7.323-.988-10.07.312l-5.201 2.46c-2.747 1.299-7.391 2.715-10.373 3.163l-5.106.767c-2.983.448-7.717-.001-10.574-1.002l-1.013-.355c-2.857-1.001-6.663-3.848-8.499-6.357l-.923-1.262c-1.837-2.509-5.753-4.827-8.747-5.177l-2.791-.326c-2.994-.35-7.652.409-10.405 1.695l-3.665 1.713c-2.753 1.286-6.27.145-7.855-2.547l-4.104-6.969c-1.586-2.692-1.308-6.847.62-9.279z"
/>
<path
fill="#695445"
stroke="#695445"
stroke-width="5"
d="M559.503 565.641l-6.595 16.23c-1.842 4.533-3.19 12.298-3.012 17.344l.375 10.576c.179 5.045 1.874 13.072 3.787 17.928l3.273 8.314c1.913 4.856 4.607 12.825 6.018 17.799l2.271 8.005c1.411 4.973 5.602 12.104 9.361 15.927l.137.14c3.759 3.823 10.993 6.882 16.159 6.833l1.542-.015c5.166-.049 11.579-3.345 14.325-7.361l1.801-2.633c2.746-4.016 4.7-11.368 4.364-16.42l-.529-7.952c-.336-5.053-1.859-13.16-3.402-18.108l-2.384-7.645c-1.543-4.948-2.962-13.051-3.17-18.098l-.145-3.513c-.208-5.047 2.286-12.052 5.569-15.646l6.804-7.445c3.283-3.594 7.962-9.9 10.45-14.085l1.031-1.735c2.488-4.185 3.56-11.641 2.394-16.653l-.216-.927c-1.166-5.012-6.322-9.396-11.516-9.793l-10.284-.786c-5.194-.397-12.79 1.392-16.967 3.995l-20.542 12.802c-4.177 2.604-9.056 8.389-10.899 12.922z"
/>
<path
fill="#695445"
stroke="#695445"
stroke-width="5"
d="M642.333 590.4l-3.736 1.374c-3.152 1.16-7.235 4.448-9.12 7.344l-3.019 4.638c-1.885 2.896-3.749 8.067-4.163 11.55l-.015.127c-.415 3.483 1.926 6.728 5.228 7.248l3.191.503c3.302.521 7.946-1.01 10.374-3.42l4.843-4.808c2.427-2.41 5.87-6.749 7.689-9.691l3.257-5.267c1.82-2.943.874-6.601-2.112-8.17l-1.304-.686c-2.987-1.569-7.962-1.902-11.113-.742z"
/>
<path
fill="#695445"
stroke="#695445"
stroke-width="5"
d="M735.821 570.473l-2.761 9.352c-1.12 3.793-3.295 9.799-4.859 13.415l-1.912 4.422c-1.563 3.615-3.549 9.676-4.436 13.537l-2.091 9.107c-.887 3.861-1.31 10.195-.946 14.149l.954 10.364c.364 3.953 3.168 9.004 6.264 11.282l3.938 2.898c3.095 2.278 8.576 3.343 12.242 2.38l4.903-1.289c3.666-.963 8.744-4.081 11.343-6.965l4.222-4.685c2.599-2.883 6.122-8.075 7.87-11.596l2.76-5.56c1.747-3.521 4.176-9.415 5.424-13.164l3.042-9.135 4.653-14.673a414.246 414.246 0 004.043-13.737l2.3-8.463c1.038-3.819 1.376-10.09.755-14.008l-.023-.144c-.621-3.917-3.056-9.592-5.439-12.675l-1.217-1.575c-2.383-3.083-7.372-5.776-11.144-6.016l-11.336-.723c-3.771-.24-8.689 2.123-10.985 5.278l-11.38 15.644c-2.295 3.155-5.064 8.787-6.184 12.58z"
/>
<path
fill="#695445"
stroke="#695445"
stroke-width="5"
d="M697.133 395.726l-4.154 1.378c-2.827.939-5.779 4.129-6.593 7.125l-1.595 5.868c-.814 2.997-.675 7.808.312 10.746l.971 2.893c.987 2.939 3.565 7.02 5.759 9.117l.387.37c2.194 2.096 4.591 6.236 5.355 9.247l.264 1.039a288.186 288.186 0 012.507 10.969l.023.111c.621 3.047 3.274 6.647 5.926 8.041l2.516 1.322c2.652 1.394 7.033 1.585 9.785.428l5.18-2.178c2.753-1.157 5.396-4.584 5.904-7.655l1.19-7.193c.508-3.07-.364-7.695-1.947-10.329l-3.356-5.586c-1.583-2.635-4.712-6.388-6.99-8.383l-.841-.737c-2.278-1.995-5.147-5.898-6.409-8.717l-3.774-8.429-2.901-6.099c-1.326-2.788-4.692-4.287-7.519-3.348z"
/>
<path
fill="#6a503e"
stroke="#6a503e"
stroke-width="3.25"
d="M664.861 644.439l1.313 5.522c.683 2.872 2.629 7.103 4.346 9.449l1.356 1.853c1.717 2.346 3.796 6.537 4.645 9.36l1.473 4.904c.848 2.823 2.802 7.108 4.364 9.571l.402.634c1.562 2.463 5.043 5.042 7.776 5.76l2.224.584c2.732.718 7.126.585 9.814-.298l2.384-.783c2.688-.883 6.21-3.54 7.867-5.934l.06-.088c1.657-2.394 2.471-6.669 1.818-9.549l-1.424-6.29c-.653-2.88-3.028-6.626-5.306-8.368l-.083-.063c-2.278-1.741-6.306-3.859-8.998-4.729l-.098-.032c-2.692-.871-5.008-3.972-5.174-6.928l-.158-2.832c-.165-2.955-1.169-7.57-2.241-10.307l-1.419-3.622c-1.072-2.737-4.224-4.956-7.041-4.956h-6.464c-2.816 0-6.365 1.996-7.928 4.46l-1.916 3.022c-1.563 2.463-2.275 6.788-1.592 9.66z"
/>
<path
fill="#6a503e"
stroke="#6a503e"
stroke-width="3.25"
d="M613.467 486.952l7.154-8.311c1.998-2.322 5.741-5.413 8.36-6.904l8.694-4.95c2.619-1.491 7.156-2.7 10.135-2.7h8.149c2.978 0 7.667.854 10.472 1.907l11.049 4.148c2.805 1.053 7.038 3.39 9.456 5.219l10.181 7.706c2.417 1.829 5.195 5.7 6.204 8.646l3.163 9.236c1.009 2.946.788 7.625-.492 10.452l-2.937 6.483c-1.28 2.826-4.478 6.253-7.142 7.653l-7.016 3.687c-2.664 1.4-7.216 2.192-10.167 1.769l-5.975-.856c-2.952-.423-6.793-2.796-8.58-5.301l-.345-.484c-1.787-2.504-5.598-5.058-8.513-5.703l-3.836-.848c-2.914-.645-7.667-1.527-10.616-1.97l-5.228-.785c-2.948-.443-7.472-1.989-10.105-3.454l-3.343-1.861c-2.632-1.464-5.846-4.922-7.178-7.723l-2.75-5.781c-1.332-2.801-.792-6.953 1.206-9.275z"
/>
<path
fill="#695445"
stroke="#695445"
stroke-width="5"
d="M170.831 603.353l.036.168c.963 4.585 5.343 9.913 9.784 11.901l12.456 5.577c4.441 1.988 11.079 1.153 14.827-1.865l4.872-3.923c3.748-3.018 7.772-9.137 8.988-13.666l3.124-11.635c1.216-4.53 1.894-11.981 1.514-16.643l-1-12.27c-.38-4.662-4.47-9.615-9.135-11.063l-5.416-1.681c-4.666-1.448-10.599.567-13.253 4.5l-23.735 35.178c-2.654 3.933-4.024 10.838-3.062 15.422z"
/>
<path
fill="#6a503e"
stroke="#6a503e"
stroke-width="3.25"
d="M241.079 650.195l-.098.182c-2.672 4.972-2.692 13.043-.044 18.026l1.093 2.057c2.648 4.983 9.433 10.007 15.156 11.221l.725.153c5.722 1.214 15.037 1.391 20.805.395l2.519-.435c5.769-.995 14.813-3.586 20.201-5.786l10.199-4.164c5.388-2.201 6.741-7.484 3.021-11.802l-4.975-5.775c-3.719-4.318-11.378-6.853-17.106-5.663l-1.416.294c-5.727 1.189-14.926.866-20.546-.723l-14.52-4.105c-5.62-1.589-12.342 1.154-15.014 6.125z"
/>
<path
fill="#695445"
stroke="#695445"
stroke-width="2.06"
d="M285.533 601.722l2.531.752c6.313 1.873 16.766 2.894 23.347 2.279l6.145-.573c6.58-.615 14.577-5.546 17.861-11.015l4.963-8.266c3.283-5.47 7.431-14.811 9.264-20.865l.956-3.156c1.833-6.054.418-15.257-3.16-20.555l-.131-.194c-3.579-5.299-11.835-9.374-18.442-9.102l-.497.02c-6.606.272-16.544 3.142-22.196 6.412l-2.648 1.531c-5.652 3.269-13.729 9.793-18.04 14.57l-.678.751c-4.311 4.778-12.358 11.347-17.974 14.673l-5.244 3.106c-5.616 3.326-11.168 11.041-12.401 17.231l-.352 1.765c-1.233 6.191.669 15.504 4.248 20.802l.131.194c3.578 5.299 9.196 5.191 12.548-.241l2.269-3.676c3.351-5.432 11.186-8.316 17.5-6.443z"
/>
<path
fill="#ff4e47"
stroke="#ff4e47"
stroke-width="28"
d="M 707.78417,358.59878 846.34934,503.2334"
/>
</g>
<g class="head">
<path
fill="#bd8b4a"
d="M911.034 474.462l58.711 25.635c3.998 1.746 10.859 2.947 15.323 2.683l8.328-.493c4.465-.264 10.914-2.315 14.884-4.112l7.47-3.676c3.97-1.797 10.92-4.795 14.4-7.235l14.84-10.392c3.48-2.441 8.1-7.154 10.33-10.528l7.47-11.338c2.22-3.374 3.57-6.514 3.01-7.015 0 0-89.032-79.584-89.326-80.524"
/>
<path
fill="#bd8b4a"
d="M913.883 547.305C869.89 505.578 853.078 442.761 876.334 407c23.255-35.762 77.772-30.925 121.766 10.802 43.99 41.727 62.76 40.306 62.76 40.306-23.26 35.762-102.983 130.924-146.977 89.197z"
/>
<path
fill="#bd8b4a"
d="m 878.57469,361.46519 c -3.549,8.006 18.32731,62.81481 18.32731,62.81481 0,0 -5.576,45.517 7.976,50.611 1.64,0.617 9.306,-0.397 19.932,-4.902 30.681,-13.007 85.9,-42.08 90.94,-42.892 3.24,-0.523 -36.398,-6.798 -33.634,-8.579 11.678,-7.525 16.195,-66.177 16.195,-66.177 0,0 0.84,-18.025 -3.737,-33.088 -3.332,-10.962 -11.307,-21.389 -20.966,-26.835 -4.181,-2.358 -8.527,-2.554 -13.033,-3.118 -9.386,-1.176 -17.697,-0.873 -26.857,2.227 -20.387,6.897 -64.15231,47.92519 -55.14331,69.93819"
/>
<g class="eye">
<ellipse
ry="58.79958"
rx="63.385227"
cy="337.63333"
cx="930.31775"
opacity="1"
fill="#6f5a4b"
fill-opacity="1"
stroke="#6f5a4b"
stroke-width="7"
/>
<path
fill="#fff"
stroke="#fff"
stroke-width="3.25"
d="M917.372 339.256c0-19.15 15.843-34.674 35.388-34.674 19.544 0 35.388 15.524 35.388 34.674 0 19.149-15.844 34.673-35.388 34.673-12.483 0-23.457-6.332-29.757-15.898a34.015 34.015 0 01-5.631-18.775z"
/>
<path
fill="#262626"
stroke="#262626"
d="M953.463 334.106c0-8.041 6.456-14.56 14.421-14.56 7.965 0 14.421 6.519 14.421 14.56s-6.456 14.559-14.421 14.559c-7.965 0-14.421-6.518-14.421-14.559z"
/>
<path
fill="#fff"
stroke="#fff"
stroke-width="5"
d="M972.119 327.418c0-.661.711-1.197 1.589-1.197.877 0 1.589.536 1.589 1.197s-.712 1.197-1.589 1.197c-.878 0-1.589-.536-1.589-1.197z"
/>
<g class="closed-eye" fill="#6a503e" stroke="#4a392c" stroke-width="3">
<path
d="M917.003 339.068c0-19.357 16.007-35.048 35.754-35.048 19.746 0 35.753 15.691 35.753 35.048 0 19.356-16.007 35.048-35.753 35.048-12.612 0-23.699-6.401-30.064-16.07a34.386 34.386 0 01-5.69-18.978z"
/>
<path
d="M923.322 358.879c.132-4.19 10.549-11.275 13.553-13.265 11.34-7.511 24.072-11.238 37.223-13.485 4.288-.732 8.655-.216 12.924-.697"
/>
</g>
</g>
<g class="nose">
<path
fill="#4a392c"
d="M1035.88 441.045c5.38-8.889 16.28-12.745 24.36-8.614 8.08 4.131 10.27 14.686 4.89 23.574-5.38 8.889-16.29 12.746-24.37 8.615-8.07-4.131-10.26-14.686-4.88-23.575z"
/>
<path
fill="#fff"
stroke="#fff"
stroke-width="1.74"
d="M1051.34 441.56c.03 2.329 2.27-.018 2.64-1.768.18-.862-1.8 2-.93 2.516 1.16.684 2.36-2.411 1.42-3.282-2.95-2.722-2.72 7.429-1.07 3.998 1.03-2.155-5.45 3.379-3.62-2.029 2.85-8.382 9.1 2.281 2.45 3.226-4.55.645-3.63-8.619 2.7-6.739 4.48 1.33-.01 5.966-3.4 5.448-5.35-.818.82-8.238 3.9-4.094"
opacity=".965"
/>
</g>
<g>
<path
class="ball"
fill="#bdf971"
stroke="#bdf971"
d="m 930.80242,477.19065 c -13.05851,3.00801 -24.77881,15.97694 -26.81485,30.67673 -2.03603,14.69979 5.61282,31.12503 15.54844,43.47271 9.93563,12.34768 22.15522,20.61485 36.12779,24.29677 13.97258,3.68192 29.69644,2.77869 42.91157,-2.81649 13.21513,-5.59518 23.92113,-15.88139 30.65943,-28.14324 6.7383,-12.26185 9.5079,-26.49697 5.7369,-38.5172 -3.771,-12.02022 -14.0825,-21.82316 -25.5603,-24.46605 -11.47786,-2.6429 -24.12011,1.87601 -37.63861,0.6591 -13.5185,-1.21691 -27.91187,-8.17033 -40.97037,-5.16233 z"
/>
<clipPath id="ballClip">
<path
class="ball"
fill="#bdf971"
stroke="#bdf971"
d="m 930.80242,477.19065 c -13.05851,3.00801 -24.77881,15.97694 -26.81485,30.67673 -2.03603,14.69979 5.61282,31.12503 15.54844,43.47271 9.93563,12.34768 22.15522,20.61485 36.12779,24.29677 13.97258,3.68192 29.69644,2.77869 42.91157,-2.81649 13.21513,-5.59518 23.92113,-15.88139 30.65943,-28.14324 6.7383,-12.26185 9.5079,-26.49697 5.7369,-38.5172 -3.771,-12.02022 -14.0825,-21.82316 -25.5603,-24.46605 -11.47786,-2.6429 -24.12011,1.87601 -37.63861,0.6591 -13.5185,-1.21691 -27.91187,-8.17033 -40.97037,-5.16233 z"
/>
</clipPath>
<path
class="ball-decoration"
clip-path="url(#ballClip)"
fill="none"
stroke="#fff"
stroke-width="4"
d="m 963.39546,597.71943 c 21.49913,-19.30313 4.80913,-64.80408 16.71919,-83.46282 16.19467,-25.37116 67.93925,-22.92156 89.43095,-47.68524"
/>
<g class="ball-sound">
<path
fill="none"
stroke="#B5D8E8"
stroke-width="4"
d="m 1096.3827,564.72204 c 11.3886,12.59779 6.8073,-1.45406 10.931,-3.9212 1.9116,-1.14344 5.2815,9.1526 9.7911,16.39495 0.2794,0.44804 0.3148,-1.06074 0.4718,-1.59122 0.9548,-3.21847 1.6781,-12.7846 4.2464,-14.32081 2.4235,-1.4498 4.5316,8.986 8.6637,9.21558 5.7286,0.31843 3.6488,-6.24515 5.8457,-8.73267 1.4614,-1.65478 3.9233,1.78478 6.0289,1.62906 4.8167,-0.35637 4.1527,-6.99656 8.0084,0.44507"
/>
<path
fill="none"
stroke="#B5D8E8"
stroke-width="4"
d="m 1070.9116,599.79298 c -2.9954,2.45576 -9.6186,6.11285 -7.2109,10.56543 0.5391,0.99715 13.1337,-2.24375 13.7587,-2.44022 0.5954,-0.18689 1.7073,-1.42002 1.6666,-0.90122 -0.083,1.06689 -3.3427,7.9055 -1.5136,9.15131 2.703,1.84098 10.413,-0.47946 10.1532,2.84261 -0.344,4.40226 -7.7885,9.49729 -5.8163,13.14464 1.3149,2.43155 6.6186,0.47256 9.456,1.55305 4.0577,1.54512 -3.7339,7.61167 2.5171,8.63834"
/>
</g>
</g>
<path
fill="#695445"
stroke="#695445"
stroke-width="3.25"
d="M894.558 290.191l5.447-7.287c.796-1.066 2.311-2.539 3.384-3.291l5.204-3.647c1.073-.751 2.934-1.708 4.157-2.137l6.932-2.428c1.223-.429 3.224-.493 4.47-.144l6.85 1.92c1.246.349 2.667 1.642 3.175 2.888l.433 1.062c.508 1.245.24 3.089-.599 4.118l-1.506 1.847c-.839 1.029-2.454 2.354-3.608 2.961l-8.515 4.475-3.971 2.087c-1.154.606-2.741 1.956-3.547 3.014l-4.601 6.045-3.025 3.71c-.839 1.029-2.558 1.984-3.839 2.134l-2.176.254c-1.282.15-3.06-.506-3.971-1.464l-.486-.51c-.912-.959-2.018-2.764-2.47-4.033l-.633-1.774c-.453-1.269-.408-3.307.1-4.553l.433-1.062c.508-1.246 1.565-3.119 2.362-4.185z"
/>
<g class="ear">
<path
fill="#554132"
d="M899.667 340.093c-18.458-82.741-41.446-100.776-75.085-74.525-35.063 27.363-93.432 28.614-74.975 111.355 18.457 82.741 67.012 141.572 108.449 131.401 41.438-10.17 60.068-85.49 41.611-168.231z"
/>
<path
fill="#4a392c"
stroke="#4a392c"
stroke-width="3.55"
d="M771.398 397.916l-.417 2.678c-.344 2.211.02 5.69.813 7.77l.614 1.609c.793 2.08 2.61 5.099 4.059 6.743l1.036 1.176a113.619 113.619 0 005.474 5.712l3.036 2.913c1.575 1.511 3.888 4.189 5.167 5.981l.047.066c1.279 1.793 3.799 4.178 5.63 5.327l1.699 1.067c1.83 1.149 4.911 2.774 6.881 3.629l6.158 2.674 6.859 2.695c1.997.784 5.282 1.902 7.338 2.497l3.679 1.064c2.056.595 5.445 1.213 7.571 1.38l6.965.549 9.208.371c2.13.086 5.581.038 7.709-.108l2.904-.199c2.128-.145 5.485-.858 7.499-1.592l3.653-1.331c2.014-.734 5.05-2.389 6.781-3.697l5.562-4.202c1.731-1.308 3.794-4.047 4.608-6.118l1.07-2.723c.814-2.071 1.239-5.549.949-7.769l-.289-2.215c-.29-2.22-1.202-5.691-2.037-7.753l-.359-.885c-.835-2.062-2.629-5.119-4.008-6.829l-3.889-4.823-3.114-4.076c-1.335-1.747-4.006-3.877-5.966-4.758l-1.023-.46c-1.96-.881-5.239-1.978-7.323-2.451l-4.892-1.109-4.17-1.093a107.68 107.68 0 01-7.401-2.285l-3.915-1.398a183.715 183.715 0 01-7.245-2.794l-5.752-2.388c-1.983-.823-5.273-1.906-7.348-2.418l-2.754-.681a176.174 176.174 0 01-7.466-2.057l-10.622-3.234-5.07-1.592c-2.043-.642-5.417-1.359-7.536-1.602l-1.639-.188c-2.119-.243-4.799 1.069-5.986 2.931l-.779 1.223c-1.187 1.861-2.653 5.108-3.275 7.251l-.912 3.142c-.622 2.143-2.333 5.18-3.822 6.784l-.64.688c-1.489 1.604-2.976 4.696-3.32 6.908z"
/>
<path
fill="#6a503e"
stroke="#6a503e"
stroke-width="3.25"
d="M818.613 319.578l-3.003 6.664c-.639 1.418-1.214 3.839-1.284 5.407l-.428 9.507-.135 10.621.142 9.336c.024 1.569.501 4.019 1.066 5.472l2.902 7.46c.565 1.453 1.687 3.695 2.506 5.007l2.82 4.52c.819 1.312 2.465 3.12 3.676 4.038l3.88 2.939c1.211.918 3.402 1.601 4.893 1.525l3.803-.193c1.491-.076 3.62-.964 4.755-1.984l4.39-3.945c1.135-1.02 2.43-3.056 2.892-4.549l1.583-5.112c.462-1.493 1.038-3.957 1.287-5.505l1.136-7.078c.248-1.548.456-4.075.464-5.644l.045-8.997c.008-1.569-.242-4.085-.558-5.619l-1.903-9.229c-.316-1.534-1.056-3.944-1.652-5.383l-2.468-5.954c-.596-1.439-1.866-3.573-2.836-4.766l-3.753-4.614c-.97-1.193-2.94-2.43-4.399-2.762l-3.66-.833c-1.459-.332-3.767-.131-5.154.449l-3.538 1.479c-1.387.58-3.354 1.964-4.393 3.092l-.038.041c-1.039 1.127-2.399 3.191-3.038 4.61z"
/>
<path
fill="#695445"
stroke="#695445"
stroke-width="2.06"
d="M828.818 330.254l-.037.064c-1.036 1.741-2.292 4.758-2.806 6.739l-.411 1.584c-.514 1.981-1.088 5.243-1.282 7.286l-.054.563c-.194 2.043.417 5.154 1.366 6.949l.352.666c.948 1.795 3.275 2.952 5.197 2.584l1.372-.262c1.922-.367 4.493-1.943 5.744-3.521l3.045-3.841c1.251-1.578 2.908-4.378 3.701-6.254l.157-.37c.793-1.877 1.747-5.03 2.13-7.043l.127-.671c.384-2.013-.603-4.6-2.203-5.777l-1.779-1.309c-1.601-1.178-4.463-1.879-6.394-1.567l-2.854.462c-1.931.312-4.335 1.977-5.371 3.718z"
/>
</g>
</g>
</g>
</svg>
</div>
</div>
</template>
<style scoped>
.container {
height: 600px;
margin: 50px auto;
position: relative;
}
.dajianshi {
width: 100%;
height: 500px;
text-align: center;
position: relative;
}
.dog {
height: 25rem;
max-height: 80vh;
max-width: 80vw;
}
.ear,
.closed-eye,
.lean,
.front-legs,
.leg,
.head,
.tail,
.tail-blur,
.shadow {
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.ball,
.ball-decoration,
.ball-sound {
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.ball {
animation-name: squishBall;
transform: matrix(1.0951654, 0.52195853, -0.52866476, 1.2371611, 208.27138, -632.28196);
}
@keyframes squishBall {
0%,
50%,
72%,
80%,
92%,
100% {
d: path(
'm 930.80242,477.19065 c -13.05851,3.00801 -24.77881,15.97694 -26.81485,30.67673 -2.03603,14.69979 5.61282,31.12503 15.54844,43.47271 9.93563,12.34768 22.15522,20.61485 36.12779,24.29677 13.97258,3.68192 29.69644,2.77869 42.91157,-2.81649 13.21513,-5.59518 23.92113,-15.88139 30.65943,-28.14324 6.7383,-12.26185 9.5079,-26.49697 5.7369,-38.5172 -3.771,-12.02022 -14.0825,-21.82316 -25.5603,-24.46605 -11.47786,-2.6429 -24.12011,1.87601 -37.63861,0.6591 -13.5185,-1.21691 -27.91187,-8.17033 -40.97037,-5.16233 z'
);
transform: matrix(1.0951654, 0.52195853, -0.52866476, 1.2371611, 208.27138, -632.28196);
}
65%,
85% {
d: path(
'm 932.4158,479.26229 c -14.67189,0.93637 -26.39219,13.9053 -28.42823,28.60509 -2.03603,14.69979 5.61282,31.12503 15.94228,38.97676 10.32947,7.85173 23.3365,7.12856 34.39281,10.90173 11.0563,3.77318 20.16082,12.04166 33.72906,12.76579 13.56828,0.72414 31.59878,-6.09489 42.72528,-18.16177 11.1265,-12.06689 15.3474,-29.37891 10.9229,-43.93943 -4.4245,-14.56052 -17.4943,-26.36654 -28.8312,-27.22343 -11.337,-0.85689 -20.93852,9.23684 -34.54977,8.73602 -13.61125,-0.50082 -31.23124,-11.59712 -45.90313,-10.66076 z'
);
transform: matrix(1.0951654, 0.52195853, -0.52866476, 1.2371611, 208.27138, -642.28196);
}
}
.ball-decoration {
animation-name: ballDecorationAnimation;
}
@keyframes ballDecorationAnimation {
0%,
50%,
72%,
80%,
92%,
100% {
d: path(
'm 963.39546,597.71943 c 21.49913,-19.30313 4.80913,-64.80408 16.71919,-83.46282 16.19467,-25.37116 67.93925,-22.92156 89.43095,-47.68524'
);
}
65%,
85% {
d: path(
'm 978.40243,581.77452 c 21.49916,-19.30313 -15.82546,-51.20401 -3.9154,-69.86275 16.19467,-25.37116 63.71847,-19.16982 85.21017,-43.9335'
);
}
}
.ball-sound {
animation-name: ballSound;
visibility: hidden;
}
@keyframes ballSound {
0%,
60%,
70%,
80%,
90%,
100% {
visibility: hidden;
transform: translateY(0);
}
65%,
67%,
69%,
85%,
87%,
89% {
visibility: visible;
transform: translateY(-3px);
}
66%,
68%,
86%,
88% {
visibility: visible;
transform: translateY(3px);
}
}
.ear {
animation-name: moveEar;
transform-origin: top center;
transform-box: fill-box;
}
@keyframes moveEar {
0%,
12%,
21%,
31%,
35%,
100% {
transform: rotateZ(0);
}
9%,
19%,
29% {
transform: rotateZ(-5deg);
transform: rotateZ(-10deg);
}
13%,
23%,
33% {
transform: rotateZ(5deg);
transform: rotateZ(10deg);
}
}
.closed-eye {
animation-name: closeEye;
}
@keyframes closeEye {
0%,
50%,
100% {
visibility: hidden;
}
10% {
visibility: visible;
}
}
.lean {
animation-name: leanDown;
transform-origin: center;
}
@keyframes leanDown {
0%,
50%,
100% {
transform: rotateZ(0) translateY(0);
}
60%,
90% {
transform: rotateZ(10deg) translateY(5%);
}
}
.front-legs {
animation-name: flexLegs;
}
@keyframes flexLegs {
0%,
50%,
100% {
transform: translateX(0);
}
60%,
90% {
transform: translateX(12%);
}
}
.leg {
animation-name: rotateLegs;
transform-origin: bottom left;
transform-box: fill-box;
transform: translateX(16%) rotate(-10deg);
}
@keyframes rotateLegs {
0%,
50%,
100% {
transform: translateX(16%) rotate(-10deg);
}
60%,
90% {
transform: translateX(35%) rotate(-83deg);
}
}
.head {
animation-name: lookDown;
transform-origin: top right;
transform-box: fill-box;
}
@keyframes lookDown {
0%,
55%,
100% {
transform: rotateZ(0) translate(0, 0);
}
60%,
90% {
transform: rotateZ(5deg) translate(2.5%, 6%);
}
}
.tail {
animation-name: moveTail;
transform-origin: bottom center;
}
@keyframes moveTail {
0%,
50%,
90%,
100% {
d: path(
'm 161.6285,568.63016 20.92664,-20.00034 C 151.50961,521.73829 14.092,504.432 14.092,504.432 c 0,0 128.8135,26.71916 147.5365,64.19816 z'
);
}
64%,
70%,
76%,
82% {
d: path(
'm 161.6285,568.63016 20.92664,-20.00034 C 151.50961,521.73829 77.565044,422.94078 77.565044,422.94078 c 0,0 65.340456,108.21038 84.063456,145.68938 z'
);
}
60%,
66%,
72%,
78%,
84% {
d: path(
'm 161.6285,568.63016 20.92664,-20.00034 C 151.50961,521.73829 14.092,504.432 14.092,504.432 c 0,0 128.8135,26.71916 147.5365,64.19816 z'
);
}
62%,
68%,
74%,
80%,
86% {
d: path(
'm 161.6285,568.63016 20.92664,-20.00034 C 151.50961,521.73829 159.419,390.74 159.419,390.74 c 0,0 -16.5135,140.41116 2.2095,177.89016 z'
);
}
}
.tail-blur {
animation-name: tailBlur;
transform-origin: bottom center;
}
@keyframes tailBlur {
0%,
59%,
90%,
100% {
opacity: 0;
}
64%,
70%,
76%,
82% {
transform: rotate(-2deg);
opacity: 0;
}
60%,
66%,
72%,
78%,
84% {
opacity: 0.3;
}
62%,
68%,
74%,
80%,
86% {
transform: rotate(2deg);
opacity: 0;
}
}
.shadow {
animation-name: scaleShadow;
transform-origin: center center;
}
@keyframes scaleShadow {
0%,
55%,
100% {
transform: scaleX(1) translateX(0);
}
60%,
90% {
transform: scaleX(1.1) translateX(4%);
}
}
</style>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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655