<head> <style> * { margin: 0; padding: 0; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: white; } h2 { color: #222; font-size: 100px; } h2 a { text-decoration: none; color: white; } h2 span { transition: 0.5s; } h2:hover span:nth-child(1) { margin-right: 10px; } h2:hover span:nth-child(2) { margin-left: 30px; } h2 span:nth-child(1)::after { opacity: 0; transition: 2s; } h2:hover span:nth-child(1)::after { content: "'"; opacity: 1; } h2:hover span { color: white; text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff; }
时间: 2024-02-10 12:31:04 浏览: 75
这段代码是一个基本的 CSS 样式表,它包含了以下几个部分:
1. `* { margin: 0; padding: 0; }`:设置所有元素的外边距和内边距为 0,这是一种常用的 CSS Reset 方式,可以消除不同浏览器之间的默认样式差异。
2. `body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: white; }`:设置 `body` 元素的最小高度为视口高度,使得页面内容总是能够占据整个屏幕高度。通过 `display: flex; justify-content: center; align-items: center;` 将页面内容居中显示,而 `background-color: white;` 则设置页面背景色为白色。
3. `h2 { color: #222; font-size: 100px; }`:设置 `h2` 元素的文字颜色为 `#222`,字体大小为 `100px`。
4. `h2 a { text-decoration: none; color: white; }`:设置 `h2` 元素内的链接样式,去掉下划线并将文字颜色设置为白色。
5. `h2 span { transition: 0.5s; }`:设置 `h2` 元素内的 `span` 元素的过渡效果时间为 0.5 秒。
6. `h2:hover span:nth-child(1) { margin-right: 10px; }`:当鼠标悬停在 `h2` 元素上时,将 `h2` 元素内第一个 `span` 元素的右外边距设置为 10 像素。
7. `h2:hover span:nth-child(2) { margin-left: 30px; }`:当鼠标悬停在 `h2` 元素上时,将 `h2` 元素内第二个 `span` 元素的左外边距设置为 30 像素。
8. `h2 span:nth-child(1)::after { opacity: 0; transition: 2s; }`:设置 `h2` 元素内第一个 `span` 元素的伪元素 `::after` 的不透明度为 0,过渡时间为 2 秒。
9. `h2:hover span:nth-child(1)::after { content: "'"; opacity: 1; }`:当鼠标悬停在 `h2` 元素上时,将 `h2` 元素内第一个 `span` 元素的伪元素 `::after` 的内容设置为单引号,并将不透明度设置为 1。
10. `h2:hover span { color: white; text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff; }`:当鼠标悬停在 `h2` 元素上时,将 `h2` 元素内所有的 `span` 元素的文字颜色设置为白色,并为它们添加一个四重文本阴影效果。
阅读全文