|
|
| （未显示同一用户的93个中间版本） |
| 第1行： |
第1行： |
| | | <div style="width:800px"> |
| <div style="position: relative; width: 150px; height: 260px; margin: 0 auto; overflow: hidden;"> | | <spineplayer |
| <!-- 背景图片 -->
| | json="/spine/1064/1064.json" |
| <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat;">[[File:战斗员图鉴_蕾欧娜.png|150px|link=]]</div> | | atlas="/spine/1064/1064.atlas" |
| <!-- 右侧内容 --> | | animation="idle" |
| <div style="position: absolute; left: 0px; bottom: 0px; width: 100%; height: 25px; background-color: rgba(0 0 0, 0.5); color: white; text-align: right; z-index: 2;">攻击力</div> | | skin="default" |
| </div> | | width="800px" |
| | | height="600px" |
| <div class="glowing-rectangle" style="width:100px; height: 10px;"></div>
| | bg="#2e2e2e" |
| | | controls="true"> |
| {{#css:
| | </spineplayer> |
| .glowing-rectangle {
| | </div> |
| width: 300px;
| |
| height: 200px;
| |
| background: linear-gradient(135deg, #6e45e2, #88d3ce);
| |
| border-radius: 12px;
| |
| box-shadow:
| |
| 0 0 15px rgba(110, 69, 226, 0.5),
| |
| 0 0 30px rgba(136, 211, 206, 0.3);
| |
| position: relative;
| |
| overflow: hidden;
| |
| transition: transform 0.3s ease, box-shadow 0.3s ease;
| |
| animation: glow-pulse 3s infinite ease-in-out;
| |
| }
| |
|
| |
| .glowing-rectangle:hover {
| |
| transform: scale(1.05);
| |
| box-shadow:
| |
| 0 0 20px rgba(110, 69, 226, 0.7),
| |
| 0 0 40px rgba(136, 211, 206, 0.5);
| |
| }
| |
|
| |
| .glowing-rectangle::before {
| |
| content: '';
| |
| position: absolute;
| |
| top: -10px;
| |
| left: -10px;
| |
| right: -10px;
| |
| bottom: -10px;
| |
| background: inherit;
| |
| filter: blur(20px);
| |
| opacity: 0.7;
| |
| z-index: -1;
| |
| }
| |
| }}
| |