https://wiki.yzygzs.net/index.php?action=history&feed=atom&title=Template%3A111%2Fhy.css 2026-09-18T11:29:26Z 本wiki上该页面的版本历史 MediaWiki 1.46.0 https://wiki.yzygzs.net/index.php?title=Template:111/hy.css&diff=277&oldid=prev 2026-09-09T11:03:42Z

<p>创建页面，内容为“<span class="autocomment">===== 纯CSS上浮动画（仅基础属性，100%兼容） =====：​</span> <span class="autocomment">图片容器 - 初始隐藏：​</span> .float-up-image { display: inline-block; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); width: 100%; opacity: 0; transform: translateY(50px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } /* 当图片被锚点激…”</p> <p><b>新页面</b></p><div>/* ===== 纯CSS上浮动画（仅基础属性，100%兼容） ===== */<br /> <br /> /* 图片容器 - 初始隐藏 */<br /> .float-up-image {<br /> display: inline-block;<br /> border-radius: 16px;<br /> overflow: hidden;<br /> box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);<br /> width: 100%;<br /> opacity: 0;<br /> transform: translateY(50px);<br /> transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),<br /> transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);<br /> }<br /> <br /> /* 当图片被锚点激活时上浮出现 */<br /> .float-up-image:target {<br /> opacity: 1;<br /> transform: translateY(0);<br /> }<br /> <br /> /* 延迟变体 */<br /> .float-up-image.delay-1 { transition-delay: 0.05s; }<br /> .float-up-image.delay-2 { transition-delay: 0.15s; }<br /> .float-up-image.delay-3 { transition-delay: 0.25s; }<br /> .float-up-image.delay-4 { transition-delay: 0.35s; }<br /> .float-up-image.delay-5 { transition-delay: 0.45s; }<br /> .float-up-image.delay-6 { transition-delay: 0.55s; }<br /> .float-up-image.delay-7 { transition-delay: 0.65s; }<br /> .float-up-image.delay-8 { transition-delay: 0.75s; }<br /> <br /> /* 图片自适应 */<br /> .float-up-image img,<br /> .float-up-image .mw-file-element {<br /> display: block;<br /> width: 100%;<br /> height: auto;<br /> border-radius: 16px;<br /> }<br /> <br /> /* 说明文字 */<br /> .float-up-image .caption {<br /> color: #d6dce5;<br /> padding: 12px 8px 4px 8px;<br /> font-size: 0.95rem;<br /> text-align: center;<br /> opacity: 0.8;<br /> letter-spacing: 1px;<br /> }<br /> <br /> /* 悬停效果 */<br /> .float-up-image:hover {<br /> transform: translateY(-6px) scale(1.01);<br /> box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);<br /> transition: transform 0.3s ease, box-shadow 0.3s ease;<br /> }<br /> <br /> /* ===== 网格容器 ===== */<br /> .image-grid {<br /> display: grid;<br /> gap: 30px;<br /> margin: 20px 0;<br /> }<br /> .image-grid-2 { grid-template-columns: repeat(2, 1fr); }<br /> .image-grid-3 { grid-template-columns: repeat(3, 1fr); }<br /> .image-grid-4 { grid-template-columns: repeat(4, 1fr); }<br /> <br /> /* 响应式 */<br /> @media (max-width: 820px) {<br /> .image-grid-2, .image-grid-3, .image-grid-4 {<br /> grid-template-columns: repeat(2, 1fr);<br /> }<br /> }<br /> @media (max-width: 520px) {<br /> .image-grid-2, .image-grid-3, .image-grid-4 {<br /> grid-template-columns: 1fr;<br /> }<br /> }</div>

HongYunHY