<!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>
