<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文字渲染</title> <style> *{ /* 初始化 */ margin: 0; padding: 0; } body{ /* 100% 窗口高度 */ min-height: 100vh; width: 100%; /* 弹性布局 水平+垂直居中 */ display: flex; justify-content: center; align-items: center; background-color: #06252e; } .box{ width: 100%; /* 投影效果 */ -webkit-box-reflect:below 1px linear-gradient(transparent, rgba(0,0,0,0.2)); } h1{ color: #fff; font-size: 96px; /* 字间距 */ letter-spacing: 15px; /* 转大写 */ text-transform: uppercase; text-align: center; line-height: 76px; outline: none; /* 自定义属性 --c,可通过 var 函数对其调用 */ --c:lightseagreen; /* 调用自定义属性--c，设置文字阴影（发光效果） */ text-shadow: 0 0 10px var(--c), 0 0 20px var(--c), 0 0 40px var(--c), 0 0 80px var(--c), 0 0 160px var(--c); /* 执行动画：动画名 时长 线性的 无限次播放 */ animation: animate 5s linear infinite; } /* 定义动画 */ @keyframes animate{ to{ /* 色相旋转过滤镜（设置度数可改变颜色） */ filter: hue-rotate(360deg); } } </style> </head> <body> <div class="box"> <h1 contenteditable="true">输入你想说的话</h1> </div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Rainbow Text</title> <style> body { background: black; color: white; font-family: 'Open Sans', sans-serif; text-align: center; height: 100%; display: flex; flex-direction: column; justify-content: center; } h1 { font-size: 8em; margin: 100px auto; animation: rainbow 5s ease-in-out infinite; } @keyframes rainbow { 0% { color: #ff0000; text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000; } 25% { color: #ff8000; text-shadow: 0 0 10px #ff8000, 0 0 20px #ff8000, 0 0 30px #ff8000; } 50% { color: #ffff00; text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00, 0 0 30px #ffff00; } 75% { color: #00ff00; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00; } 100% { color: #0000ff; text-shadow: 0 0 10px #0000ff, 0 0 20px #0000ff, 0 0 30px #0000ff; } } </style> </head> <body> <h1>Hello Girl</h1> </body> </html>
