搜索到
3
篇与
HTML
的结果
-
html闪烁文字效果实现 闪烁文字效果实现 我将创建一个具有多种闪烁效果的HTML页面，包含不同样式的闪烁文字，让用户可以选择喜欢的样式。 思路分析使用CSS关键帧动画实现闪烁效果创建多种闪烁样式（不同颜色、速度、模式）添加交互功能让用户控制闪烁设计美观的界面布局 下面是实现代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>闪烁文字效果展示</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; color: white; } .container { background: rgba(0, 0, 0, 0.7); border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); width: 90%; max-width: 800px; padding: 30px; text-align: center; } h1 { margin-bottom: 30px; font-size: 2.8rem; text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); } .blink-section { background: rgba(255, 255, 255, 0.1); border-radius: 15px; padding: 25px; margin: 25px 0; transition: transform 0.3s; } .blink-section:hover { transform: translateY(-5px); } .blink-title { font-size: 1.4rem; margin-bottom: 15px; color: #aaccff; } /* 基本闪烁效果 */ .blink-basic { font-size: 2.2rem; font-weight: bold; animation: blink-basic 1s infinite; } @keyframes blink-basic { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* 彩色闪烁效果 */ .blink-colorful { font-size: 2.2rem; font-weight: bold; animation: blink-colorful 1.5s infinite; } @keyframes blink-colorful { 0% { color: #ff0000; text-shadow: 0 0 10px #ff0000; } 25% { color: #00ff00; text-shadow: 0 0 10px #00ff00; } 50% { color: #0000ff; text-shadow: 0 0 10px #0000ff; } 75% { color: #ffff00; text-shadow: 0 0 10px #ffff00; } 100% { color: #ff00ff; text-shadow: 0 0 10px #ff00ff; } } /* 快速闪烁效果 */ .blink-fast { font-size: 2.2rem; font-weight: bold; animation: blink-fast 0.3s infinite; } @keyframes blink-fast { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } /* 霓虹灯效果 */ .blink-neon { font-size: 2.2rem; font-weight: bold; color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #0ff, 0 0 40px #0ff, 0 0 80px #0ff; animation: blink-neon 1.2s infinite alternate; } @keyframes blink-neon { 0% { opacity: 0.8; text-shadow: 0 0 5px #fff; } 100% { opacity: 1; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #0ff, 0 0 40px #0ff, 0 0 80px #0ff; } } /* 控制面板 */ .controls { background: rgba(255, 255, 255, 0.1); border-radius: 15px; padding: 25px; margin-top: 30px; } .control-group { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 15px; margin: 15px 0; } .btn { background: linear-gradient(45deg, #ff0080, #ff8c00); border: none; border-radius: 50px; color: white; padding: 12px 25px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: all 0.3s; box-shadow: 0 5px 15px rgba(255, 0, 128, 0.4); } .btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(255, 0, 128, 0.6); } .btn:active { transform: translateY(1px); } .btn-stop { background: linear-gradient(45deg, #ff0000, #8b0000); } .slider-container { width: 100%; max-width: 400px; margin: 20px auto; text-align: left; } label { display: block; margin-bottom: 10px; font-size: 1.1rem; } input[type="range"] { width: 100%; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.2); outline: none; } .instructions { margin-top: 30px; padding: 20px; background: rgba(0, 0, 0, 0.4); border-radius: 10px; text-align: left; font-size: 1rem; line-height: 1.6; } .instructions h3 { margin-bottom: 10px; color: #aaccff; } .instructions ul { padding-left: 20px; } .instructions li { margin: 10px 0; } footer { margin-top: 30px; font-size: 0.9rem; opacity: 0.8; } @media (max-width: 600px) { h1 { font-size: 2rem; } .blink-basic, .blink-colorful, .blink-fast, .blink-neon { font-size: 1.8rem; } } </style> </head> <body> <div class="container"> <h1>✨ 闪烁文字效果展示 ✨</h1> <div class="blink-section"> <div class="blink-title">基本闪烁效果</div> <div class="blink-basic">欢迎来到闪烁文字世界！</div> </div> <div class="blink-section"> <div class="blink-title">彩色闪烁效果</div> <div class="blink-colorful">CSS动画真神奇！</div> </div> <div class="blink-section"> <div class="blink-title">快速闪烁效果</div> <div class="blink-fast">注意：闪烁速度很快！</div> </div> <div class="blink-section"> <div class="blink-title">霓虹灯闪烁效果</div> <div class="blink-neon">霓虹灯文字效果</div> </div> <div class="controls"> <h2>闪烁控制面板</h2> <div class="control-group"> <button class="btn" id="startBtn">开始所有闪烁</button> <button class="btn btn-stop" id="stopBtn">停止所有闪烁</button> </div> <div class="slider-container"> <label for="speedSlider">闪烁速度调整: <span id="speedValue">中速</span></label> <input type="range" id="speedSlider" min="0.1" max="2" step="0.1" value="1"> </div> </div> <div class="instructions"> <h3>实现原理说明</h3> <ul> <li>使用CSS <code>@keyframes</code> 创建动画关键帧</li> <li>通过 <code>animation</code> 属性将动画应用到元素</li> <li><code>animation-iteration-count: infinite</code> 实现无限循环</li> <li>使用 <code>opacity</code> 变化实现闪烁效果</li> <li>使用 <code>text-shadow</code> 增强视觉效果</li> <li>JavaScript控制动画播放状态和速度</li> </ul> </div> <footer> <p>© 2023 闪烁文字效果展示 | 使用HTML/CSS/JavaScript实现</p> </footer> </div> <script> document.addEventListener('DOMContentLoaded', function() { const blinkElements = document.querySelectorAll('[class*="blink-"]'); const startBtn = document.getElementById('startBtn'); const stopBtn = document.getElementById('stopBtn'); const speedSlider = document.getElementById('speedSlider'); const speedValue = document.getElementById('speedValue'); // 开始所有闪烁 startBtn.addEventListener('click', function() { blinkElements.forEach(element => { element.style.animationPlayState = 'running'; }); }); // 停止所有闪烁 stopBtn.addEventListener('click', function() { blinkElements.forEach(element => { element.style.animationPlayState = 'paused'; }); }); // 调整闪烁速度 speedSlider.addEventListener('input', function() { const speed = parseFloat(this.value); blinkElements.forEach(element => { const currentAnimation = getComputedStyle(element).animationName; element.style.animation = `${currentAnimation} ${speed}s infinite`; }); // 更新速度显示 if (speed < 0.5) { speedValue.textContent = '极快'; } else if (speed < 1) { speedValue.textContent = '快速'; } else if (speed < 1.5) { speedValue.textContent = '中速'; } else { speedValue.textContent = '慢速'; } }); }); </script> </body> </html>功能说明 这个页面展示了四种不同的闪烁文字效果： 基本闪烁效果：通过改变文字透明度实现简单的闪烁彩色闪烁效果：文字颜色和阴影不断变化，形成彩色闪烁快速闪烁效果：高速闪烁效果，适用于警示信息霓虹灯闪烁效果：模拟霓虹灯管的闪烁效果，带有发光阴影 控制功能 开始所有闪烁：启动所有文字闪烁效果停止所有闪烁：暂停所有文字闪烁效果闪烁速度调整：通过滑块控制闪烁速度（极快、快速、中速、慢速） 技术实现 使用CSS关键帧动画（@keyframes）定义闪烁行为通过animation属性将动画应用到文字元素使用JavaScript控制动画的播放状态（运行/暂停）使用JavaScript动态调整动画速度 这个页面采用了响应式设计，在各种设备上都能正常显示，并具有美观的渐变背景和现代化的UI设计。 您可以直接复制上面的代码到HTML文件中，用浏览器打开即可查看效果。 -
网站挂上欢度春节灯笼的代码 代码已经做了压缩，放在网站头部 body下面就好了，至于灯笼的文字自己修改下 <style type="text/css"> .ct2 .mn {width:770px;} .ct2 .sd {width:218px;} @media screen and (max-width:768px) {.xnkl {display:none;} } .deng-box {position:fixed;top:-40px;right:150px;z-index:9999;pointer-events:none;} .deng-box1 {position:fixed;top:-30px;right:10px;z-index:9999;pointer-events:none} .deng-box2 {position:fixed;top:-40px;left:150px;z-index:9999;pointer-events:none} .deng-box3 {position:fixed;top:-30px;left:10px;z-index:9999;pointer-events:none} .deng-box1 .deng,.deng-box3 .deng {position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 5s infinite ease-in-out;box-shadow:-5px 5px 30px 4px #fc903d} .deng {position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 3s infinite ease-in-out;box-shadow:-5px 5px 50px 4px #fa6c00} .deng-a {width:100px;height:90px;background:#d8000f;background:rgba(216,0,15,.1);margin:12px 8px 8px 8px;border-radius:50% 50%;border:2px solid #dc8f03} .deng-b {width:45px;height:90px;background:#d8000f;background:rgba(216,0,15,.1);margin:-4px 8px 8px 26px;border-radius:50% 50%;border:2px solid #dc8f03} .xian {position:absolute;top:-20px;left:60px;width:2px;height:20px;background:#dc8f03} .shui-a {position:relative;width:5px;height:20px;margin:-5px 0 0 59px;-webkit-animation:swing 4s infinite ease-in-out;-webkit-transform-origin:50% -45px;background:orange;border-radius:0 0 5px 5px} .shui-b {position:absolute;top:14px;left:-2px;width:10px;height:10px;background:#dc8f03;border-radius:50%} .shui-c {position:absolute;top:18px;left:-2px;width:10px;height:35px;background:orange;border-radius:0 0 0 5px} .deng:before {position:absolute;top:-7px;left:29px;height:12px;width:60px;content:" ";display:block;z-index:999;border-radius:5px 5px 0 0;border:solid 1px #dc8f03;background:orange;background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)} .deng:after {position:absolute;bottom:-7px;left:10px;height:12px;width:60px;content:" ";display:block;margin-left:20px;border-radius:0 0 5px 5px;border:solid 1px #dc8f03;background:orange;background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)} .deng-t {font-family:黑体,Arial,Lucida Grande,Tahoma,sans-serif;font-size:3.2rem;color:#dc8f03;font-weight:700;line-height:85px;text-align:center} .night .deng-box,.night .deng-box1,.night .deng-t {background:0 0!important} @-moz-keyframes swing {0% {-moz-transform:rotate(-10deg)} 50% {-moz-transform:rotate(10deg)} 100% {-moz-transform:rotate(-10deg)} } @-webkit-keyframes swing {0% {-webkit-transform:rotate(-10deg)} 50% {-webkit-transform:rotate(10deg)} 100% {-webkit-transform:rotate(-10deg)} } </style> <div id="wp"class="wp"><div class="xnkl"><div class="deng-box2"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">度</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box3"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">欢</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box1"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">春</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">新</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div></div>
-
js代码增加网页底部 本站已稳定运行了X天 比较简单的一段JS代码，直接放在要显示的位置即可， 如果你用的是lolimeow主题，直接复制代码放在 【全局设置】中的【★ （10）网站底部版权后自定义信息（支持HTML）】这样更新主题也不会影响到 修改第一行new Date("2/25/2018")里的日期为你的建站时间 本站已稳定运行了 <script type="text/javascript"> var webstar= new Date("2/25/2018"); var webnow = new Date(); var dotime = webnow.getTime() - webstar.getTime(); var donow = Math.floor(dotime / (1000 * 60 * 60 * 24)); document.write(+donow) </script> 天
