css让文本闪烁,使用简单的CSS实现文本出错闪烁动画效果

CSS

语言：

CSSSCSS

确定

body {

margin: 0;

}

section {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

height: 100vh;

background: -webkit-linear-gradient(296deg, black, #141414);

background: linear-gradient(154deg, black, #141414);

color: white;

}

.title {

font-size: 10vw;

-webkit-animation: cray 6s infinite steps(50);

animation: cray 6s infinite steps(50);

font-family: "Roboto";

}

@-webkit-keyframes cray {

2% {

font-weight: 600;

font-style: italic;

text-decoration: none;

text-transform: none;

}

4% {

font-weight: 400;

font-style: normal;

text-decoration: none;

text-transform: none;

}

6% {

font-weight: 300;

font-style: normal;

text-decoration: none;

text-transform: uppercase;

}

8% {

font-weight: 300;

font-style: normal;

text-decoration: none;

text-transform: lowercase;

}

10% {

font-weight: 700;

font-style: italic;

text-decoration: none;

text-transform: capitalize;

}

12% {

font-weight: 400;

font-style: italic;

text-decoration: none;

text-transform: none;

}

14% {

font-weight: 300;

font-style: normal;

text-decoration: line-through;

text-transform: none;

}

16% {

font-weight: 400;

font-style: normal;

text-decoration: none;

text-transform: none;

}

18% {

font-weight: 100;

font-style: normal;

text-decoration: none;

text-transform: none;

}

20% {

font-weight: 100;

font-style: italic;

text-decoration: none;

text-transform: none;

}

22% {

font-weight: 700;

font-style: italic;

text-decoration: none;

text-transform: none;

}

24% {

font-weight: 200;

font-style: normal;

text-decoration: underline;

text-transform: none;

}

26% {

font-weight: 400;

font-style: normal;

text-decoration: none;

text-transform: none;

}

28% {

font-weight: 700;

font-style: normal;

text-decoration: none;

text-transform: none;

}

30% {

font-weight: 200;

font-style: normal;

text-decoration: line-through;

text-transform: capitalize;

}

32% {

font-weight: 600;

font-style: italic;

text-decoration: none;

text-transform: none;

}

34% {

font-weight: 600;

font-style: normal;

text-decoration: none;

text-transform: none;

}

36% {

font-weight: 400;

font-style: normal;

text-decoration: none;

text-transform: uppercase;

}

38% {

font-weight: 700;

font-style: normal;

text-decoration: none;

text-transform: capitalize;

}

40% {

font-weight: 100;

font-style: italic;

text-decoration: none;

text-transform: uppercase;

}

42% {

font-weight: 500;

font-style: normal;

text-decoration: none;

text-transform: capitalize;

}

44% {

font-weight: 600;

font-style: normal;

text-decoration: none;

text-transform: none;

}

46% {

font-weight: 400;

font-style: normal;

text-decoration: none;

text-transform: none;

}

48% {

font-weight: 500;

font-style: normal;

text-decoration: underline;

text-transform: none;

}

50% {

font-weight: 500;

font-style: italic;

text-decoration: underline;

text-transform: capitalize;

}

52% {

font-weight: 700;

font-style: italic;

text-decoration: none;

text-transform: none;

}

54% {

font-weight: 700;

font-style: italic;

text-decoration: none;

text-transform: none;

}

56% {

font-weight: 700;

font-style: normal;

text-decoration: underline;

text-transform: none;

}

58% {

font-weight: 400;

font-style: normal;

text-decoration: none;

text-transform: lowercase;

}

60% {

font-weight: 500;

font-style: italic;

text-decoration: none;

text-transform: none;

}

62% {

font-weight: 100;

font-style: normal;

text-decoration: none;

text-transform: none;

}

64% {

font-weight: 300;

font-style: normal;

text-decoration: none;

text-transform: none;

}

66% {

font-weight: 700;

font-style: normal;

text-decoration: none;

text-transform: none;

}

68% {

font-weight: 100;

font-style: italic;

text-decoration: none;

text-transform: none;

}

70% {

font-weight: 600;

font-style: normal;

text-decoration: none;

text-transform: capitalize;

}

72% {

font-weight: 300;

font-style: normal;

text-decoration: none;

text-transform: none;

}

74% {

font-weight: 200;

font-style: normal;

text-decoration: none;

text-transform: none;

}

76% {

font-weight: 700;

font-style: normal;

text-decoration: none;

text-transform: none;

}

78% {

font-weight: 100;

font-style: normal;

text-decoration: none;

text-transform: uppercase;

}

80% {

font-weight: 700;

font-style: normal;

text-decoration: line-through;

text-transform: none;

}

82% {

font-weight: 400;

font-style: italic;

text-decoration: none;

text-transform: lowercase;

}

84% {

font-weight: 600;

font-style: normal;

text-decoration: none;

text-transform: none;

}

86% {

font-weight: 300;

font-style: normal;

text-decoration: none;

text-transform: none;

}

88% {

font-weight: 100;

font-style: normal;

text-decoration: none;

text-transform: none;

}

90% {

font-weight: 600;

font-style: normal;

text-decoration: none;

text-transform: none;

}

92% {

font-weight: 500;

font-style: normal;

text-decoration: underline;

text-transform: lowercase;

}

94% {

font-weight: 700;

font-style: italic;

text-decoration: line-through;

text-transform: none;

}

96% {

font-weight: 500;

font-style: normal;

text-decoration: none;

text-transform: lowercase;

}

98% {

font-weight: 600;

font-style: normal;

text-decoration: none;

text-transform: none;

}

}

@keyframes cray {

2% {

font-weight: 600;

font-style: italic;

text-decoration: none;

text-transform: none;

}

4% {

font-weight: 400;

font-style: normal;

text-decoration: none;

text-transform: none;

}

6% {

font-weight: 300;

font-style: normal;

text-decoration: none;

text-transform: uppercase;

}

8% {

font-weight: 300;

font-style: normal;

text-decoration: none;

text-transform: lowercase;

}

10% {

font-weight: 700;

font-style: italic;

text-decoration: none;

text-transform: capitalize;

}

12% {

font-weight: 400;

font-style: italic;

text-decoration: none;

text-transform: none;

}

14% {

font-weight: 300;

font-style: normal;

text-decoration: line-through;

text-transform: none;

}

16% {

font-weight: 400;

font-style: normal;

text-decoration: none;

text-transform: none;

}

18% {

font-weight: 100;

font-style: normal;

text-decoration: none;

text-transform: none;

}

20% {

font-weight: 100;

font-style: italic;

text-decoration: none;

text-transform: none;

}

22% {

font-weight: 700;

font-style: italic;

text-decoration: none;

text-transform: none;

}

24% {

font-weight: 200;

font-style: normal;

text-decoration: underline;

text-transform: none;

}

26% {

font-weight: 400;

font-style: normal;

text-decoration: none;

text-transform: none;

}

28% {

font-weight: 700;

font-style: normal;

text-decoration: none;

text-transform: none;

}

30% {

font-weight: 200;

font-style: normal;

text-decoration: line-through;

text-transform: capitalize;

}

32% {

font-weight: 600;

font-style: italic;

text-decoration: none;

text-transform: none;

}

34% {

font-weight: 600;

font-style: normal;

text-decoration: none;

text-transform: none;

}

36% {

font-weight: 400;

font-style: normal;

text-decoration: none;

text-transform: uppercase;

}

38% {

font-weight: 700;

font-style: normal;

text-decoration: none;

text-transform: capitalize;

}

40% {

font-weight: 100;

font-style: italic;

text-decoration: none;

text-transform: uppercase;

}

42% {

font-weight: 500;

font-style: normal;

text-decoration: none;

text-transform: capitalize;

}

44% {

font-weight: 600;

font-style: normal;

text-decoration: none;

text-transform: none;

}

46% {

font-weight: 400;

font-style: normal;

text-decoration: none;

text-transform: none;

}

48% {

font-weight: 500;

font-style: normal;

text-decoration: underline;

text-transform: none;

}

50% {

font-weight: 500;

font-style: italic;

text-decoration: underline;

text-transform: capitalize;

}

52% {

font-weight: 700;

font-style: italic;

text-decoration: none;

text-transform: none;

}

54% {

font-weight: 700;

font-style: italic;

text-decoration: none;

text-transform: none;

}

56% {

font-weight: 700;

font-style: normal;

text-decoration: underline;

text-transform: none;

}

58% {

font-weight: 400;

font-style: normal;

text-decoration: none;

text-transform: lowercase;

}

60% {

font-weight: 500;

font-style: italic;

text-decoration: none;

text-transform: none;

}

62% {

font-weight: 100;

font-style: normal;

text-decoration: none;

text-transform: none;

}

64% {

font-weight: 300;

font-style: normal;

text-decoration: none;

text-transform: none;

}

66% {

font-weight: 700;

font-style: normal;

text-decoration: none;

text-transform: none;

}

68% {

font-weight: 100;

font-style: italic;

text-decoration: none;

text-transform: none;

}

70% {

font-weight: 600;

font-style: normal;

text-decoration: none;

text-transform: capitalize;

}

72% {

font-weight: 300;

font-style: normal;

text-decoration: none;

text-transform: none;

}

74% {

font-weight: 200;

font-style: normal;

text-decoration: none;

text-transform: none;

}

76% {

font-weight: 700;

font-style: normal;

text-decoration: none;

text-transform: none;

}

78% {

font-weight: 100;

font-style: normal;

text-decoration: none;

text-transform: uppercase;

}

80% {

font-weight: 700;

font-style: normal;

text-decoration: line-through;

text-transform: none;

}

82% {

font-weight: 400;

font-style: italic;

text-decoration: none;

text-transform: lowercase;

}

84% {

font-weight: 600;

font-style: normal;

text-decoration: none;

text-transform: none;

}

86% {

font-weight: 300;

font-style: normal;

text-decoration: none;

text-transform: none;

}

88% {

font-weight: 100;

font-style: normal;

text-decoration: none;

text-transform: none;

}

90% {

font-weight: 600;

font-style: normal;

text-decoration: none;

text-transform: none;

}

92% {

font-weight: 500;

font-style: normal;

text-decoration: underline;

text-transform: lowercase;

}

94% {

font-weight: 700;

font-style: italic;

text-decoration: line-through;

text-transform: none;

}

96% {

font-weight: 500;

font-style: normal;

text-decoration: none;

text-transform: lowercase;

}

98% {

font-weight: 600;

font-style: normal;

text-decoration: none;

text-transform: none;

}

}