搜索到
2
篇与
的结果
-
幻影文字CSS特效 使用方法导入CSS文件joe主题就放在主题设置的 自定义css 里。在需要使用的标签上加上 class="h1" 属性举例 幻影文字特效@import 'https://fonts.googleapis.com/css?family=Lato'; .h1 { animation: glitch 3s steps(100) infinite; color: #151515; font-size: 1.2em; text-align: center; text-transform: uppercase; } @keyframes glitch { 0% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 1% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 2% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 3% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 4% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 5% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 6% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 7% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 8% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 9% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 10% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 11% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);} 12% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);} 13% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);} 14% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);} 15% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);} 16% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} 17% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} 18% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} 19% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} 20% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} 21% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 22% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 23% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 24% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 25% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 26% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0.5px);} 27% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0.5px);} 28% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 29% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 30% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 31% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 32% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 33% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 34% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 35% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0.5px);} 36% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0.5px);} 37% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0.5px);} 38% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 39% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 40% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 41% { text-shadow: 45px 0 0 #0c33f5, -45px 0 0 lime; filter: blur(0);} 42% { text-shadow: 0 0 0 #0c33f5, 0 0 0 lime; filter: blur(0);} 43% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);} 44% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);} 45% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);} 46% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);} 47% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0.5px);} 48% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} 49% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} 50% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} 51% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 52% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 53% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 54% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 55% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0.5px);} 56% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0.5px);} 57% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0.5px);} 58% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 59% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 60% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 61% { text-shadow: 30px 0 0 red, -30px 0 0 lime; filter: blur(0);} 62% { text-shadow: 0 0 0 red, 0 0 0 lime; filter: blur(0);} 63% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0);} 64% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0);} 65% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0);} 66% { text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5; filter: blur(0.5px);} 67% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0.5px);} 68% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 69% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 70% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 71% { text-shadow: 50px 0 0 red, -50px 0 0 #0c33f5; filter: blur(0);} 72% { text-shadow: 0 0 0 red, 0 0 0 #0c33f5; filter: blur(0);} 73% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 74% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 75% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 76% { text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5; filter: blur(0);} 77% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 78% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 79% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 80% { text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5; filter: blur(0);} 81% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);} 82% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0);} 83% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);} 84% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);} 85% { text-shadow: 1px 0 0 red, -1px 0 0 lime; filter: blur(0.5px);} 86% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0.5px);} 87% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0.5px);} 88% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} 89% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} 90% { text-shadow: -3px 0 0 red, 3px 0 0 lime; filter: blur(0);} 91% { text-shadow: 60px 0 0 lime, -60px 0 0 #0c33f5; filter: blur(0);} 92% { text-shadow: 0 0 0 lime, 0 0 0 #0c33f5; filter: blur(0);} 92% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 93% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 94% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 95% { text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime; filter: blur(0);} 96% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 97% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 98% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 99% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} 100% { text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime; filter: blur(0);} } -
灵动的鱼群跳跃 介绍这是一款灵动的鱼群跳跃，采用 JS 技术，通过 canvas 绘制，适合用在页面底部，增添网站灵动气氛。教程修改 /www/wwwroot/你的站点/usr/themes/Joe/public/footer.php 在 <footer></footer> 之间添加两行代码{tabs}{tabs-pane label="代码"}<div id="jsi-flying-fish-container"></div> <script src="https://www.888mz.cn/1/js/script.js"></script>{/tabs-pane}{tabs-pane label="效果图"} {/tabs-pane}{/tabs}
