<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>跳动的文字</title><style>#m1:hover {animation: shine 1s linear infinite;}@keyframes shine {0% {color: #fff;}50% {color: #0000ff;}100% {color: #fff;}}/*m2*/#m2 {transition: all 1s;filter: blur(0px);}#m2:hover {filter: blur(3px);}/*m2*//*m3*/#m3:hover {transform: skewX(-10deg);}/*m3*//*m4*/#m4 {transition: all 1s;padding-left: 0;}#m4:hover {padding-left: 50px;}/*m4*//*m5*/#m5 {background-image: linear-gradient(45deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);background-clip: text;-webkit-background-clip: text;color: transparent;}#m5:hover {background-position: 0% 50%;}/*m5*//*m6*/#m6 {transition: all 0.5s;color: #000;}#m6:hover {color: #f00;transform: scale(1.2);}/*m6*//*m7*/#m7 {transition: all 0.5s;border: 2px solid #000;padding: 10px;}#m7:hover {border: 10px solid #f00;padding: 20px;}/*m7*//*m8*/#m8 {position: relative;overflow: hidden;}#m8:after {content: "";display: block;position: absolute;top: 0;left: 100%;width: 100%;height: 100%;background-color: #f00;transition: all 0.5s;}#m8:hover:after {left: 0;}/*m8*//*m9*/#m9 {overflow: hidden;border-right: 0.15em solid #f00;white-space: nowrap;margin: 0 auto;letter-spacing: 0.15em;animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;font-size: 1.5em;font-weight: 800;}@keyframes typing {from {width: 0;}to {width: 100%;}}@keyframes blink-caret {from, to {border-color: transparent;}50% {border-color: #f00;}}/*m9*/#m10 {transition: all 3.5s;}#m10:hover {transform: rotate(360deg);}</style>
</head>
<body>
<h1 id="m1">闪耀文字</h1>
<h1 id="m2">模糊文字</h1>
<h1 id="m3">变形文字</h1>
<h1 id="m4">移动文字</h1>
<h1 id="m5">彩虹文字</h1>
<h1 id="m6">突出文字</h1>
<h1 id="m7">边框文字</h1>
<h1 id="m8">暴露文字</h1>
<h1 id="m9">打字文字</h1>
<h1 id="m10">旋转文字</h1></body>
</html>
