html如何使圆点变色,CSS3 波动的彩色小圆点

CSS

语言:

CSSSCSS

确定

.dot-container {

display: block;

position: absolute;

top: 50%;

left: 50%;

width: 256px;

height: 128px;

padding: 128px 0 0 0;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

text-align: center;

}

.dot {

position: absolute;

display: block;

width: 12px;

height: 0;

background: black;

margin: 0;

padding: 0;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

.dot:before,

.dot:after {

content: "";

position: absolute;

left: 0;

display: block;

width: 12px;

height: 12px;

margin: 0;

padding: 0;

border-radius: 6px;

-webkit-transform: translateY(0);

-ms-transform: translateY(0);

transform: translateY(0);

}

.dot:before {

top: -6px;

}

.dot:after {

bottom: -6px;

}

.dot.n1,

.dot.n1:before,

.dot.n1:after {

background: #3369e8;

}

.dot.n1 {

left: calc(50% + -30px);

-webkit-animation: wait 1.3s ease-in-out 0.1s infinite;

animation: wait 1.3s ease-in-out 0.1s infinite;

}

.dot-container:hover .dot.n1 {

-webkit-animation: voice-1 7s ease-in-out 0.05s infinite;

animation: voice-1 7s ease-in-out 0.05s infinite;

}

.dot.n2,

.dot.n2:before,

.dot.n2:after {

background: #d50f25;

}

.dot.n2 {

left: calc(50% + -10px);

-webkit-animation: wait 1.3s ease-in-out 0.2s infinite;

animation: wait 1.3s ease-in-out 0.2s infinite;

}

.dot-container:hover .dot.n2 {

-webkit-animation: voice-2 7s ease-in-out 0.1s infinite;

animation: voice-2 7s ease-in-out 0.1s infinite;

}

.dot.n3,

.dot.n3:before,

.dot.n3:after {

background: #eeb211;

}

.dot.n3 {

left: calc(50% + 10px);

-webkit-animation: wait 1.3s ease-in-out 0.3s infinite;

animation: wait 1.3s ease-in-out 0.3s infinite;

}

.dot-container:hover .dot.n3 {

-webkit-animation: voice-3 7s ease-in-out 0.15s infinite;

animation: voice-3 7s ease-in-out 0.15s infinite;

}

.dot.n4,

.dot.n4:before,

.dot.n4:after {

background: #009925;

}

.dot.n4 {

left: calc(50% + 30px);

-webkit-animation: wait 1.3s ease-in-out 0.4s infinite;

animation: wait 1.3s ease-in-out 0.4s infinite;

}

.dot-container:hover .dot.n4 {

-webkit-animation: voice-4 7s ease-in-out 0.2s infinite;

animation: voice-4 7s ease-in-out 0.2s infinite;

}

@-webkit-keyframes wait {

0% {

-webkit-transform: translate(-50%, 0);

transform: translate(-50%, 0);

}

50% {

-webkit-transform: translate(-50%, -4px);

transform: translate(-50%, -4px);

}

100% {

-webkit-transform: translate(-50%, 0);

transform: translate(-50%, 0);

}

}

@keyframes wait {

0% {

-webkit-transform: translate(-50%, 0);

transform: translate(-50%, 0);

}

50% {

-webkit-transform: translate(-50%, -4px);

transform: translate(-50%, -4px);

}

100% {

-webkit-transform: translate(-50%, 0);

transform: translate(-50%, 0);

}

}

@-webkit-keyframes voice-1 {

0% {

height: 58.25342px;

}

1% {

height: 54.2px;

}

2% {

height: 40.14658px;

}

3% {

height: 34.78732px;

}

4% {

height: 44.78732px;

}

5% {

height: 42.14658px;

}

6% {

height: 52.2px;

}

7% {

height: 53.25342px;

}

8% {

height: 63.61268px;

}

9% {

height: 62.61268px;

}

10% {

height: 61.25342px;

}

11% {

height: 47.2px;

}

12% {

height: 40.14658px;

}

13% {

height: 41.78732px;

}

14% {

height: 44.78732px;

}

15% {

height: 46.14658px;

}

16% {

height: 46.2px;

}

17% {

height: 55.25342px;

}

18% {

height: 61.61268px;

}

19% {

height: 58.61268px;

}

20% {

height: 56.25342px;

}

21% {

height: 52.2px;

}

22% {

height: 46.14658px;

}

23% {

height: 37.78732px;

}

24% {

height: 39.78732px;

}

25% {

height: 46.14658px;

}

26% {

height: 46.2px;

}

27% {

height: 59.25342px;

}

28% {

height: 66.61268px;

}

29% {

height: 62.61268px;

}

30% {

height: 61.25342px;

}

31% {

height: 50.2px;

}

32% {

height: 50.14658px;

}

33% {

height: 42.78732px;

}

34% {

height: 34.78732px;

}

35% {

height: 48.14658px;

}

36% {

height: 48.2px;

}

37% {

height: 58.25342px;

}

38% {

height: 66.61268px;

}

39% {

height: 62.61268px;

}

40% {

height: 56.25342px;

}

41% {

height: 47.2px;

}

42% {

height: 42.14658px;

}

43% {

height: 39.78732px;

}

44% {

height: 45.78732px;

}

45% {

height: 48.14658px;

}

46% {

height: 55.2px;

}

47% {

height: 61.25342px;

}

48% {

height: 61.61268px;

}

49% {

height: 61.61268px;

}

50% {

height: 59.25342px;

}

51% {

height: 48.2px;

}

52% {

height: 46.14658px;

}

53% {

height: 35.78732px;

}

54% {

height: 35.78732px;

}

55% {

height: 46.14658px;

}

56% {

height: 50.2px;

}

57% {

height: 61.25342px;

}

58% {

height: 61.61268px;

}

59% {

height: 67.61268px;

}

60% {

height: 54.25342px;

}

61% {

height: 54.2px;

}

62% {

height: 41.14658px;

}

63% {

height: 39.78732px;

}

64% {

height: 44.78732px;

}

65% {

height: 45.14658px;

}

66% {

height: 48.2px;

}

67% {

height: 55.25342px;

}

68% {

height: 66.61268px;

}

69% {

height: 59.61268px;

}

70% {

height: 55.25342px;

}

71% {

height: 46.2px;

}

72% {

height: 43.14658px;

}

73% {

height: 36.78732px;

}

74% {

height: 37.78732px;

}

75% {

height: 44.14658px;

}

76% {

height: 47.2px;

}

77% {

height: 53.25342px;

}

78% {

height: 64.61268px;

}

79% {

height: 68.61268px;

}

80% {

height: 60.25342px;

}

81% {

height: 52.2px;

}

82% {

height: 47.14658px;

}

83% {

height: 39.78732px;

}

84% {

height: 36.78732px;

}

85% {

height: 47.14658px;

}

86% {

height: 52.2px;

}

87% {

height: 61.25342px;

}

88% {

height: 59.61268px;

}

89% {

height: 64.61268px;

}

90% {

height: 54.25342px;

}

91% {

height: 56.2px;

}

92% {

height: 43.14658px;

}

93% {

height: 39.78732px;

}

94% {

height: 38.78732px;

}

95% {

height: 40.14658px;

}

96% {

height: 57.2px;

}

97% {

height: 53.25342px;

}

98% {

height: 68.61268px;

}

99% {

height: 61.61268px;

}

100% {

height: 53.25342px;

}

}

@keyframes voice-1 {

0% {

height: 58.25342px;

}

1% {

height: 54.2px;

}

2% {

height: 40.14658px;

}

3% {

height: 34.78732px;

}

4% {

height: 44.78732px;

}

5% {

height: 42.14658px;

}

6% {

height: 52.2px;

}

7% {

height: 53.25342px;

}

8% {

height: 63.61268px;

}

9% {

height: 62.61268px;

}

10% {

height: 61.25342px;

}

11% {

height: 47.2px;

}

12% {

height: 40.14658px;

}

13% {

height: 41.78732px;

}

14% {

height: 44.78732px;

}

15% {

height: 46.14658px;

}

16% {

height: 46.2px;

}

17% {

height: 55.25342px;

}

18% {

height: 61.61268px;

}

19% {

height: 58.61268px;

}

20% {

height: 56.25342px;

}

21% {

height: 52.2px;

}

22% {

height: 46.14658px;

}

23% {

height: 37.78732px;

}

24% {

height: 39.78732px;

}

25% {

height: 46.14658px;

}

26% {

height: 46.2px;

}

27% {

height: 59.25342px;

}

28% {

height: 66.61268px;

}

29% {

height: 62.61268px;

}

30% {

height: 61.25342px;

}

31% {

height: 50.2px;

}

32% {

height: 50.14658px;

}

33% {

height: 42.78732px;

}

34% {

height: 34.78732px;

}

35% {

height: 48.14658px;

}

36% {

height: 48.2px;

}

37% {

height: 58.25342px;

}

38% {

height: 66.61268px;

}

39% {

height: 62.61268px;

}

40% {

height: 56.25342px;

}

41% {

height: 47.2px;

}

42% {

height: 42.14658px;

}

43% {

height: 39.78732px;

}

44% {

height: 45.78732px;

}

45% {

height: 48.14658px;

}

46% {

height: 55.2px;

}

47% {

height: 61.25342px;

}

48% {

height: 61.61268px;

}

49% {

height: 61.61268px;

}

50% {

height: 59.25342px;

}

51% {

height: 48.2px;

}

52% {

height: 46.14658px;

}

53% {

height: 35.78732px;

}

54% {

height: 35.78732px;

}

55% {

height: 46.14658px;

}

56% {

height: 50.2px;

}

57% {

height: 61.25342px;

}

58% {

height: 61.61268px;

}

59% {

height: 67.61268px;

}

60% {

height: 54.25342px;

}

61% {

height: 54.2px;

}

62% {

height: 41.14658px;

}

63% {

height: 39.78732px;

}

64% {

height: 44.78732px;

}

65% {

height: 45.14658px;

}

66% {

height: 48.2px;

}

67% {

height: 55.25342px;

}

68% {

height: 66.61268px;

}

69% {

height: 59.61268px;

}

70% {

height: 55.25342px;

}

71% {

height: 46.2px;

}

72% {

height: 43.14658px;

}

73% {

height: 36.78732px;

}

74% {

height: 37.78732px;

}

75% {

height: 44.14658px;

}

76% {

height: 47.2px;

}

77% {

height: 53.25342px;

}

78% {

height: 64.61268px;

}

79% {

height: 68.61268px;

}

80% {

height: 60.25342px;

}

81% {

height: 52.2px;

}

82% {

height: 47.14658px;

}

83% {

height: 39.78732px;

}

84% {

height: 36.78732px;

}

85% {

height: 47.14658px;

}

86% {

height: 52.2px;

}

87% {

height: 61.25342px;

}

88% {

height: 59.61268px;

}

89% {

height: 64.61268px;

}

90% {

height: 54.25342px;

}

91% {

height: 56.2px;

}

92% {

height: 43.14658px;

}

93% {

height: 39.78732px;

}

94% {

height: 38.78732px;

}

95% {

height: 40.14658px;

}

96% {

height: 57.2px;

}

97% {

height: 53.25342px;

}

98% {

height: 68.61268px;

}

99% {

height: 61.61268px;

}

100% {

height: 53.25342px;

}

}

@-webkit-keyframes voice-2 {

0% {

height: 25.61268px;

}

1% {

height: 27.25342px;

}

2% {

height: 25.2px;

}

3% {

height: 13.14658px;

}

4% {

height: 5.78732px;

}

5% {

height: 10.78732px;

}

6% {

height: 7.14658px;

}

7% {

height: 23.2px;

}

8% {

height: 32.25342px;

}

9% {

height: 28.61268px;

}

10% {

height: 34.61268px;

}

11% {

height: 28.25342px;

}

12% {

height: 14.2px;

}

13% {

height: 16.14658px;

}

14% {

height: 13.78732px;

}

15% {

height: 8.78732px;

}

16% {

height: 8.14658px;

}

17% {

height: 20.2px;

}

18% {

height: 27.25342px;

}

19% {

height: 36.61268px;

}

20% {

height: 33.61268px;

}

21% {

height: 25.25342px;

}

22% {

height: 16.2px;

}

23% {

height: 18.14658px;

}

24% {

height: 4.78732px;

}

25% {

height: 12.78732px;

}

26% {

height: 10.14658px;

}

27% {

height: 21.2px;

}

28% {

height: 32.25342px;

}

29% {

height: 34.61268px;

}

30% {

height: 28.61268px;

}

31% {

height: 21.25342px;

}

32% {

height: 17.2px;

}

33% {

height: 14.14658px;

}

34% {

height: 11.78732px;

}

35% {

height: 12.78732px;

}

36% {

height: 12.14658px;

}

37% {

height: 18.2px;

}

38% {

height: 24.25342px;

}

39% {

height: 30.61268px;

}

40% {

height: 28.61268px;

}

41% {

height: 27.25342px;

}

42% {

height: 16.2px;

}

43% {

height: 15.14658px;

}

44% {

height: 3.78732px;

}

45% {

height: 11.78732px;

}

46% {

height: 12.14658px;

}

47% {

height: 25.2px;

}

48% {

height: 27.25342px;

}

49% {

height: 25.61268px;

}

50% {

height: 36.61268px;

}

51% {

height: 32.25342px;

}

52% {

height: 16.2px;

}

53% {

height: 12.14658px;

}

54% {

height: 11.78732px;

}

55% {

height: 7.78732px;

}

56% {

height: 15.14658px;

}

57% {

height: 19.2px;

}

58% {

height: 30.25342px;

}

59% {

height: 28.61268px;

}

60% {

height: 36.61268px;

}

61% {

height: 22.25342px;

}

62% {

height: 25.2px;

}

63% {

height: 17.14658px;

}

64% {

height: 11.78732px;

}

65% {

height: 5.78732px;

}

66% {

height: 10.14658px;

}

67% {

height: 19.2px;

}

68% {

height: 29.25342px;

}

69% {

height: 28.61268px;

}

70% {

height: 30.61268px;

}

71% {

height: 30.25342px;

}

72% {

height: 16.2px;

}

73% {

height: 11.14658px;

}

74% {

height: 13.78732px;

}

75% {

height: 4.78732px;

}

76% {

height: 8.14658px;

}

77% {

height: 17.2px;

}

78% {

height: 30.25342px;

}

79% {

height: 34.61268px;

}

80% {

height: 36.61268px;

}

81% {

height: 30.25342px;

}

82% {

height: 24.2px;

}

83% {

height: 18.14658px;

}

84% {

height: 12.78732px;

}

85% {

height: 9.78732px;

}

86% {

height: 7.14658px;

}

87% {

height: 14.2px;

}

88% {

height: 22.25342px;

}

89% {

height: 28.61268px;

}

90% {

height: 29.61268px;

}

91% {

height: 27.25342px;

}

92% {

height: 19.2px;

}

93% {

height: 16.14658px;

}

94% {

height: 12.78732px;

}

95% {

height: 13.78732px;

}

96% {

height: 12.14658px;

}

97% {

height: 20.2px;

}

98% {

height: 24.25342px;

}

99% {

height: 34.61268px;

}

100% {

height: 31.61268px;

}

}

@keyframes voice-2 {

0% {

height: 25.61268px;

}

1% {

height: 27.25342px;

}

2% {

height: 25.2px;

}

3% {

height: 13.14658px;

}

4% {

height: 5.78732px;

}

5% {

height: 10.78732px;

}

6% {

height: 7.14658px;

}

7% {

height: 23.2px;

}

8% {

height: 32.25342px;

}

9% {

height: 28.61268px;

}

10% {

height: 34.61268px;

}

11% {

height: 28.25342px;

}

12% {

height: 14.2px;

}

13% {

height: 16.14658px;

}

14% {

height: 13.78732px;

}

15% {

height: 8.78732px;

}

16% {

height: 8.14658px;

}

17% {

height: 20.2px;

}

18% {

height: 27.25342px;

}

19% {

height: 36.61268px;

}

20% {

height: 33.61268px;

}

21% {

height: 25.25342px;

}

22% {

height: 16.2px;

}

23% {

height: 18.14658px;

}

24% {

height: 4.78732px;

}

25% {

height: 12.78732px;

}

26% {

height: 10.14658px;

}

27% {

height: 21.2px;

}

28% {

height: 32.25342px;

}

29% {

height: 34.61268px;

}

30% {

height: 28.61268px;

}

31% {

height: 21.25342px;

}

32% {

height: 17.2px;

}

33% {

height: 14.14658px;

}

34% {

height: 11.78732px;

}

35% {

height: 12.78732px;

}

36% {

height: 12.14658px;

}

37% {

height: 18.2px;

}

38% {

height: 24.25342px;

}

39% {

height: 30.61268px;

}

40% {

height: 28.61268px;

}

41% {

height: 27.25342px;

}

42% {

height: 16.2px;

}

43% {

height: 15.14658px;

}

44% {

height: 3.78732px;

}

45% {

height: 11.78732px;

}

46% {

height: 12.14658px;

}

47% {

height: 25.2px;

}

48% {

height: 27.25342px;

}

49% {

height: 25.61268px;

}

50% {

height: 36.61268px;

}

51% {

height: 32.25342px;

}

52% {

height: 16.2px;

}

53% {

height: 12.14658px;

}

54% {

height: 11.78732px;

}

55% {

height: 7.78732px;

}

56% {

height: 15.14658px;

}

57% {

height: 19.2px;

}

58% {

height: 30.25342px;

}

59% {

height: 28.61268px;

}

60% {

height: 36.61268px;

}

61% {

height: 22.25342px;

}

62% {

height: 25.2px;

}

63% {

height: 17.14658px;

}

64% {

height: 11.78732px;

}

65% {

height: 5.78732px;

}

66% {

height: 10.14658px;

}

67% {

height: 19.2px;

}

68% {

height: 29.25342px;

}

69% {

height: 28.61268px;

}

70% {

height: 30.61268px;

}

71% {

height: 30.25342px;

}

72% {

height: 16.2px;

}

73% {

height: 11.14658px;

}

74% {

height: 13.78732px;

}

75% {

height: 4.78732px;

}

76% {

height: 8.14658px;

}

77% {

height: 17.2px;

}

78% {

height: 30.25342px;

}

79% {

height: 34.61268px;

}

80% {

height: 36.61268px;

}

81% {

height: 30.25342px;

}

82% {

height: 24.2px;

}

83% {

height: 18.14658px;

}

84% {

height: 12.78732px;

}

85% {

height: 9.78732px;

}

86% {

height: 7.14658px;

}

87% {

height: 14.2px;

}

88% {

height: 22.25342px;

}

89% {

height: 28.61268px;

}

90% {

height: 29.61268px;

}

91% {

height: 27.25342px;

}

92% {

height: 19.2px;

}

93% {

height: 16.14658px;

}

94% {

height: 12.78732px;

}

95% {

height: 13.78732px;

}

96% {

height: 12.14658px;

}

97% {

height: 20.2px;

}

98% {

height: 24.25342px;

}

99% {

height: 34.61268px;

}

100% {

height: 31.61268px;

}

}

@-webkit-keyframes voice-3 {

0% {

height: 72.41268px;

}

1% {

height: 76.41268px;

}

2% {

height: 76.05342px;

}

3% {

height: 63px;

}

4% {

height: 54.94658px;

}

5% {

height: 49.58732px;

}

6% {

height: 54.58732px;

}

7% {

height: 61.94658px;

}

8% {

height: 64px;

}

9% {

height: 76.05342px;

}

10% {

height: 74.41268px;

}

11% {

height: 78.41268px;

}

12% {

height: 76.05342px;

}

13% {

height: 70px;

}

14% {

height: 54.94658px;

}

15% {

height: 56.58732px;

}

16% {

height: 58.58732px;

}

17% {

height: 61.94658px;

}

18% {

height: 67px;

}

19% {

height: 66.05342px;

}

20% {

height: 79.41268px;

}

21% {

height: 75.41268px;

}

22% {

height: 71.05342px;

}

23% {

height: 62px;

}

24% {

height: 61.94658px;

}

25% {

height: 47.58732px;

}

26% {

height: 53.58732px;

}

27% {

height: 56.94658px;

}

28% {

height: 61px;

}

29% {

height: 66.05342px;

}

30% {

height: 75.41268px;

}

31% {

height: 78.41268px;

}

32% {

height: 68.05342px;

}

33% {

height: 65px;

}

34% {

height: 52.94658px;

}

35% {

height: 49.58732px;

}

36% {

height: 49.58732px;

}

37% {

height: 51.94658px;

}

38% {

height: 63px;

}

39% {

height: 76.05342px;

}

40% {

height: 76.41268px;

}

41% {

height: 78.41268px;

}

42% {

height: 70.05342px;

}

43% {

height: 70px;

}

44% {

height: 59.94658px;

}

45% {

height: 52.58732px;

}

46% {

height: 48.58732px;

}

47% {

height: 54.94658px;

}

48% {

height: 65px;

}

49% {

height: 72.05342px;

}

50% {

height: 80.41268px;

}

51% {

height: 70.41268px;

}

52% {

height: 77.05342px;

}

53% {

height: 63px;

}

54% {

height: 53.94658px;

}

55% {

height: 58.58732px;

}

56% {

height: 50.58732px;

}

57% {

height: 55.94658px;

}

58% {

height: 59px;

}

59% {

height: 77.05342px;

}

60% {

height: 79.41268px;

}

61% {

height: 78.41268px;

}

62% {

height: 70.05342px;

}

63% {

height: 67px;

}

64% {

height: 55.94658px;

}

65% {

height: 56.58732px;

}

66% {

height: 55.58732px;

}

67% {

height: 52.94658px;

}

68% {

height: 69px;

}

69% {

height: 72.05342px;

}

70% {

height: 73.41268px;

}

71% {

height: 71.41268px;

}

72% {

height: 77.05342px;

}

73% {

height: 70px;

}

74% {

height: 62.94658px;

}

75% {

height: 52.58732px;

}

76% {

height: 58.58732px;

}

77% {

height: 52.94658px;

}

78% {

height: 67px;

}

79% {

height: 74.05342px;

}

80% {

height: 79.41268px;

}

81% {

height: 72.41268px;

}

82% {

height: 75.05342px;

}

83% {

height: 63px;

}

84% {

height: 58.94658px;

}

85% {

height: 50.58732px;

}

86% {

height: 47.58732px;

}

87% {

height: 58.94658px;

}

88% {

height: 67px;

}

89% {

height: 72.05342px;

}

90% {

height: 77.41268px;

}

91% {

height: 81.41268px;

}

92% {

height: 73.05342px;

}

93% {

height: 70px;

}

94% {

height: 61.94658px;

}

95% {

height: 54.58732px;

}

96% {

height: 48.58732px;

}

97% {

height: 59.94658px;

}

98% {

height: 63px;

}

99% {

height: 73.05342px;

}

100% {

height: 81.41268px;

}

}

@keyframes voice-3 {

0% {

height: 72.41268px;

}

1% {

height: 76.41268px;

}

2% {

height: 76.05342px;

}

3% {

height: 63px;

}

4% {

height: 54.94658px;

}

5% {

height: 49.58732px;

}

6% {

height: 54.58732px;

}

7% {

height: 61.94658px;

}

8% {

height: 64px;

}

9% {

height: 76.05342px;

}

10% {

height: 74.41268px;

}

11% {

height: 78.41268px;

}

12% {

height: 76.05342px;

}

13% {

height: 70px;

}

14% {

height: 54.94658px;

}

15% {

height: 56.58732px;

}

16% {

height: 58.58732px;

}

17% {

height: 61.94658px;

}

18% {

height: 67px;

}

19% {

height: 66.05342px;

}

20% {

height: 79.41268px;

}

21% {

height: 75.41268px;

}

22% {

height: 71.05342px;

}

23% {

height: 62px;

}

24% {

height: 61.94658px;

}

25% {

height: 47.58732px;

}

26% {

height: 53.58732px;

}

27% {

height: 56.94658px;

}

28% {

height: 61px;

}

29% {

height: 66.05342px;

}

30% {

height: 75.41268px;

}

31% {

height: 78.41268px;

}

32% {

height: 68.05342px;

}

33% {

height: 65px;

}

34% {

height: 52.94658px;

}

35% {

height: 49.58732px;

}

36% {

height: 49.58732px;

}

37% {

height: 51.94658px;

}

38% {

height: 63px;

}

39% {

height: 76.05342px;

}

40% {

height: 76.41268px;

}

41% {

height: 78.41268px;

}

42% {

height: 70.05342px;

}

43% {

height: 70px;

}

44% {

height: 59.94658px;

}

45% {

height: 52.58732px;

}

46% {

height: 48.58732px;

}

47% {

height: 54.94658px;

}

48% {

height: 65px;

}

49% {

height: 72.05342px;

}

50% {

height: 80.41268px;

}

51% {

height: 70.41268px;

}

52% {

height: 77.05342px;

}

53% {

height: 63px;

}

54% {

height: 53.94658px;

}

55% {

height: 58.58732px;

}

56% {

height: 50.58732px;

}

57% {

height: 55.94658px;

}

58% {

height: 59px;

}

59% {

height: 77.05342px;

}

60% {

height: 79.41268px;

}

61% {

height: 78.41268px;

}

62% {

height: 70.05342px;

}

63% {

height: 67px;

}

64% {

height: 55.94658px;

}

65% {

height: 56.58732px;

}

66% {

height: 55.58732px;

}

67% {

height: 52.94658px;

}

68% {

height: 69px;

}

69% {

height: 72.05342px;

}

70% {

height: 73.41268px;

}

71% {

height: 71.41268px;

}

72% {

height: 77.05342px;

}

73% {

height: 70px;

}

74% {

height: 62.94658px;

}

75% {

height: 52.58732px;

}

76% {

height: 58.58732px;

}

77% {

height: 52.94658px;

}

78% {

height: 67px;

}

79% {

height: 74.05342px;

}

80% {

height: 79.41268px;

}

81% {

height: 72.41268px;

}

82% {

height: 75.05342px;

}

83% {

height: 63px;

}

84% {

height: 58.94658px;

}

85% {

height: 50.58732px;

}

86% {

height: 47.58732px;

}

87% {

height: 58.94658px;

}

88% {

height: 67px;

}

89% {

height: 72.05342px;

}

90% {

height: 77.41268px;

}

91% {

height: 81.41268px;

}

92% {

height: 73.05342px;

}

93% {

height: 70px;

}

94% {

height: 61.94658px;

}

95% {

height: 54.58732px;

}

96% {

height: 48.58732px;

}

97% {

height: 59.94658px;

}

98% {

height: 63px;

}

99% {

height: 73.05342px;

}

100% {

height: 81.41268px;

}

}

@-webkit-keyframes voice-4 {

0% {

height: 30.65342px;

}

1% {

height: 35.01268px;

}

2% {

height: 32.01268px;

}

3% {

height: 37.65342px;

}

4% {

height: 25.6px;

}

5% {

height: 15.54658px;

}

6% {

height: 12.18732px;

}

7% {

height: 16.18732px;

}

8% {

height: 23.54658px;

}

9% {

height: 27.6px;

}

10% {

height: 38.65342px;

}

11% {

height: 32.01268px;

}

12% {

height: 41.01268px;

}

13% {

height: 29.65342px;

}

14% {

height: 23.6px;

}

15% {

height: 17.54658px;

}

16% {

height: 10.18732px;

}

17% {

height: 13.18732px;

}

18% {

height: 21.54658px;

}

19% {

height: 21.6px;

}

20% {

height: 27.65342px;

}

21% {

height: 42.01268px;

}

22% {

height: 39.01268px;

}

23% {

height: 30.65342px;

}

24% {

height: 31.6px;

}

25% {

height: 17.54658px;

}

26% {

height: 16.18732px;

}

27% {

height: 9.18732px;

}

28% {

height: 21.54658px;

}

29% {

height: 24.6px;

}

30% {

height: 34.65342px;

}

31% {

height: 40.01268px;

}

32% {

height: 42.01268px;

}

33% {

height: 31.65342px;

}

34% {

height: 27.6px;

}

35% {

height: 13.54658px;

}

36% {

height: 13.18732px;

}

37% {

height: 9.18732px;

}

38% {

height: 23.54658px;

}

39% {

height: 20.6px;

}

40% {

height: 37.65342px;

}

41% {

height: 34.01268px;

}

42% {

height: 41.01268px;

}

43% {

height: 32.65342px;

}

44% {

height: 22.6px;

}

45% {

height: 13.54658px;

}

46% {

height: 9.18732px;

}

47% {

height: 12.18732px;

}

48% {

height: 18.54658px;

}

49% {

height: 22.6px;

}

50% {

height: 31.65342px;

}

51% {

height: 32.01268px;

}

52% {

height: 32.01268px;

}

53% {

height: 34.65342px;

}

54% {

height: 25.6px;

}

55% {

height: 20.54658px;

}

56% {

height: 17.18732px;

}

57% {

height: 19.18732px;

}

58% {

height: 18.54658px;

}

59% {

height: 21.6px;

}

60% {

height: 33.65342px;

}

61% {

height: 33.01268px;

}

62% {

height: 32.01268px;

}

63% {

height: 38.65342px;

}

64% {

height: 24.6px;

}

65% {

height: 20.54658px;

}

66% {

height: 14.18732px;

}

67% {

height: 16.18732px;

}

68% {

height: 23.54658px;

}

69% {

height: 30.6px;

}

70% {

height: 35.65342px;

}

71% {

height: 32.01268px;

}

72% {

height: 38.01268px;

}

73% {

height: 35.65342px;

}

74% {

height: 27.6px;

}

75% {

height: 18.54658px;

}

76% {

height: 18.18732px;

}

77% {

height: 10.18732px;

}

78% {

height: 23.54658px;

}

79% {

height: 29.6px;

}

80% {

height: 37.65342px;

}

81% {

height: 32.01268px;

}

82% {

height: 37.01268px;

}

83% {

height: 29.65342px;

}

84% {

height: 26.6px;

}

85% {

height: 22.54658px;

}

86% {

height: 11.18732px;

}

87% {

height: 14.18732px;

}

88% {

height: 21.54658px;

}

89% {

height: 20.6px;

}

90% {

height: 37.65342px;

}

91% {

height: 41.01268px;

}

92% {

height: 32.01268px;

}

93% {

height: 32.65342px;

}

94% {

height: 20.6px;

}

95% {

height: 13.54658px;

}

96% {

height: 16.18732px;

}

97% {

height: 16.18732px;

}

98% {

height: 21.54658px;

}

99% {

height: 20.6px;

}

100% {

height: 29.65342px;

}

}

@keyframes voice-4 {

0% {

height: 30.65342px;

}

1% {

height: 35.01268px;

}

2% {

height: 32.01268px;

}

3% {

height: 37.65342px;

}

4% {

height: 25.6px;

}

5% {

height: 15.54658px;

}

6% {

height: 12.18732px;

}

7% {

height: 16.18732px;

}

8% {

height: 23.54658px;

}

9% {

height: 27.6px;

}

10% {

height: 38.65342px;

}

11% {

height: 32.01268px;

}

12% {

height: 41.01268px;

}

13% {

height: 29.65342px;

}

14% {

height: 23.6px;

}

15% {

height: 17.54658px;

}

16% {

height: 10.18732px;

}

17% {

height: 13.18732px;

}

18% {

height: 21.54658px;

}

19% {

height: 21.6px;

}

20% {

height: 27.65342px;

}

21% {

height: 42.01268px;

}

22% {

height: 39.01268px;

}

23% {

height: 30.65342px;

}

24% {

height: 31.6px;

}

25% {

height: 17.54658px;

}

26% {

height: 16.18732px;

}

27% {

height: 9.18732px;

}

28% {

height: 21.54658px;

}

29% {

height: 24.6px;

}

30% {

height: 34.65342px;

}

31% {

height: 40.01268px;

}

32% {

height: 42.01268px;

}

33% {

height: 31.65342px;

}

34% {

height: 27.6px;

}

35% {

height: 13.54658px;

}

36% {

height: 13.18732px;

}

37% {

height: 9.18732px;

}

38% {

height: 23.54658px;

}

39% {

height: 20.6px;

}

40% {

height: 37.65342px;

}

41% {

height: 34.01268px;

}

42% {

height: 41.01268px;

}

43% {

height: 32.65342px;

}

44% {

height: 22.6px;

}

45% {

height: 13.54658px;

}

46% {

height: 9.18732px;

}

47% {

height: 12.18732px;

}

48% {

height: 18.54658px;

}

49% {

height: 22.6px;

}

50% {

height: 31.65342px;

}

51% {

height: 32.01268px;

}

52% {

height: 32.01268px;

}

53% {

height: 34.65342px;

}

54% {

height: 25.6px;

}

55% {

height: 20.54658px;

}

56% {

height: 17.18732px;

}

57% {

height: 19.18732px;

}

58% {

height: 18.54658px;

}

59% {

height: 21.6px;

}

60% {

height: 33.65342px;

}

61% {

height: 33.01268px;

}

62% {

height: 32.01268px;

}

63% {

height: 38.65342px;

}

64% {

height: 24.6px;

}

65% {

height: 20.54658px;

}

66% {

height: 14.18732px;

}

67% {

height: 16.18732px;

}

68% {

height: 23.54658px;

}

69% {

height: 30.6px;

}

70% {

height: 35.65342px;

}

71% {

height: 32.01268px;

}

72% {

height: 38.01268px;

}

73% {

height: 35.65342px;

}

74% {

height: 27.6px;

}

75% {

height: 18.54658px;

}

76% {

height: 18.18732px;

}

77% {

height: 10.18732px;

}

78% {

height: 23.54658px;

}

79% {

height: 29.6px;

}

80% {

height: 37.65342px;

}

81% {

height: 32.01268px;

}

82% {

height: 37.01268px;

}

83% {

height: 29.65342px;

}

84% {

height: 26.6px;

}

85% {

height: 22.54658px;

}

86% {

height: 11.18732px;

}

87% {

height: 14.18732px;

}

88% {

height: 21.54658px;

}

89% {

height: 20.6px;

}

90% {

height: 37.65342px;

}

91% {

height: 41.01268px;

}

92% {

height: 32.01268px;

}

93% {

height: 32.65342px;

}

94% {

height: 20.6px;

}

95% {

height: 13.54658px;

}

96% {

height: 16.18732px;

}

97% {

height: 16.18732px;

}

98% {

height: 21.54658px;

}

99% {

height: 20.6px;

}

100% {

height: 29.65342px;

}

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值