html打字机,打字机动画.html

最新推荐文章于 2025-01-12 22:34:51 发布

Yvetzy

最新推荐文章于 2025-01-12 22:34:51 发布

阅读量402

点赞数

文章标签： html打字机

CSS打字机动画-jq22.com

.typewriter {

--blue: #5C86FF;

--blue-dark: #275EFE;

--key: #fff;

--paper: #EEF0FD;

--text: #D3D4EC;

--tool: #FBC56C;

--duration: 3s;

position: relative;

-webkit-animation: bounce var(--duration) linear infinite;

animation: bounce var(--duration) linear infinite;

}

.typewriter .slide {

width: 92px;

height: 20px;

border-radius: 3px;

margin-left: 14px;

-webkit-transform: translateX(14px);

transform: translateX(14px);

background: linear-gradient(var(--blue), var(--blue-dark));

-webkit-animation: slide var(--duration) ease infinite;

animation: slide var(--duration) ease infinite;

}

.typewriter .slide:before, .typewriter .slide:after,

.typewriter .slide i:before {

content: '';

position: absolute;

background: var(--tool);

}

.typewriter .slide:before {

width: 2px;

height: 8px;

top: 6px;

left: 100%;

}

.typewriter .slide:after {

left: 94px;

top: 3px;

height: 14px;

width: 6px;

border-radius: 3px;

}

.typewriter .slide i {

display: block;

position: absolute;

right: 100%;

width: 6px;

height: 4px;

top: 4px;

background: var(--tool);

}

.typewriter .slide i:before {

right: 100%;

top: -2px;

width: 4px;

border-radius: 2px;

height: 14px;

}

.typewriter .paper {

position: absolute;

left: 24px;

top: -26px;

width: 40px;

height: 46px;

border-radius: 5px;

background: var(--paper);

-webkit-transform: translateY(46px);

transform: translateY(46px);

-webkit-animation: paper var(--duration) linear infinite;

animation: paper var(--duration) linear infinite;

}

.typewriter .paper:before {

content: '';

position: absolute;

left: 6px;

right: 6px;

top: 7px;

border-radius: 2px;

height: 4px;

-webkit-transform: scaleY(0.8);

transform: scaleY(0.8);

background: var(--text);

box-shadow: 0 12px 0 var(--text), 0 24px 0 var(--text), 0 36px 0 var(--text);

}

.typewriter .keyboard {

width: 120px;

height: 56px;

margin-top: -10px;

z-index: 1;

position: relative;

}

.typewriter .keyboard:before, .typewriter .keyboard:after {

content: '';

position: absolute;

}

.typewriter .keyboard:before {

top: 0;

left: 0;

right: 0;

bottom: 0;

border-radius: 7px;

background: linear-gradient(135deg, var(--blue), var(--blue-dark));

-webkit-transform: perspective(10px) rotateX(2deg);

transform: perspective(10px) rotateX(2deg);

-webkit-transform-origin: 50% 100%;

transform-origin: 50% 100%;

}

.typewriter .keyboard:after {

left: 2px;

top: 25px;

width: 11px;

height: 4px;

border-radius: 2px;

box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);

-webkit-animation: keyboard var(--duration) linear infinite;

animation: keyboard var(--duration) linear infinite;

}

@-webkit-keyframes bounce {

85%,

92%,

100% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

89% {

-webkit-transform: translateY(-4px);

transform: translateY(-4px);

}

95% {

-webkit-transform: translateY(2px);

transform: translateY(2px);

}

@keyframes bounce {

85%,

92%,

100% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

89% {

-webkit-transform: translateY(-4px);

transform: translateY(-4px);

}

95% {

-webkit-transform: translateY(2px);

transform: translateY(2px);

}

@-webkit-keyframes slide {

5% {

-webkit-transform: translateX(14px);

transform: translateX(14px);

}

15%,

30% {

-webkit-transform: translateX(6px);

transform: translateX(6px);

}

40%,

55% {

-webkit-transform: translateX(0);

transform: translateX(0);

}

65%,

70% {

-webkit-transform: translateX(-4px);

transform: translateX(-4px);

}

80%,

89% {

-webkit-transform: translateX(-12px);

transform: translateX(-12px);

}

100% {

-webkit-transform: translateX(14px);

transform: translateX(14px);

}

@keyframes slide {

5% {

-webkit-transform: translateX(14px);

transform: translateX(14px);

}

15%,

30% {

-webkit-transform: translateX(6px);

transform: translateX(6px);

}

40%,

55% {

-webkit-transform: translateX(0);

transform: translateX(0);

}

65%,

70% {

-webkit-transform: translateX(-4px);

transform: translateX(-4px);

}

80%,

89% {

-webkit-transform: translateX(-12px);

transform: translateX(-12px);

}

100% {

-webkit-transform: translateX(14px);

transform: translateX(14px);

}

@-webkit-keyframes paper {

5% {

-webkit-transform: translateY(46px);

transform: translateY(46px);

}

20%,

30% {

-webkit-transform: translateY(34px);

transform: translateY(34px);

}

40%,

55% {

-webkit-transform: translateY(22px);

transform: translateY(22px);

}

65%,

70% {

-webkit-transform: translateY(10px);

transform: translateY(10px);

}

80%,

85% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

92%,

100% {

-webkit-transform: translateY(46px);

transform: translateY(46px);

}

@keyframes paper {

5% {

-webkit-transform: translateY(46px);

transform: translateY(46px);

}

20%,

30% {

-webkit-transform: translateY(34px);

transform: translateY(34px);

}

40%,

55% {

-webkit-transform: translateY(22px);

transform: translateY(22px);

}

65%,

70% {

-webkit-transform: translateY(10px);

transform: translateY(10px);

}

80%,

85% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

92%,

100% {

-webkit-transform: translateY(46px);

transform: translateY(46px);

}

@-webkit-keyframes keyboard {

5%,

12%,

21%,

30%,

39%,

48%,

57%,

66%,

75%,

84% {

}

9% {

box-shadow: 15px 2px 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);

}

18% {

box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 2px 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);

}

27% {

box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 12px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);

}

36% {

box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 12px 0 var(--key), 60px 12px 0 var(--key), 68px 12px 0 var(--key), 83px 10px 0 var(--key);

}

45% {

box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 2px 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);

}

54% {

box-shadow: 15px 0 0 var(--key), 30px 2px 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);

}

63% {

}

72% {

box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 2px 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);

}

81% {

box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 12px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);

}

@keyframes keyboard {

5%,

12%,

21%,

30%,

39%,

48%,

57%,

66%,

75%,

84% {

}

9% {

}

18% {

}

27% {

}

36% {

box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 12px 0 var(--key), 60px 12px 0 var(--key), 68px 12px 0 var(--key), 83px 10px 0 var(--key);

}

45% {

}

54% {

}

63% {

}

72% {

}

81% {

}

html {