SCSS 是Sass的一种强大语法,它扩展了 CSS 的功能,使创建动态且可自定义的样式变得更加容易。为了更好地理解 SCSS 的应用,我们将演示如何创建一个漂亮的悬停效果,当鼠标悬停在元素上时,元素会呈现出填充的效果。我们将解释实现过程和自定义选项,并为 SCSS 代码提供上下文。
HTML结构
在深入了解 SCSS 的神奇之处之前,让我们先为按钮定义一个简单的 HTML 结构。
<div class=”buttons”>
<h1>
Simple hover effects with <code>box-shadow</code>
</h1>
<button class=”fill”> Fill In</button>
</div>
在这个代码片段中,我们有一个button带有类名的元素fill。这个类名将在我们的 SCSS 代码中用于定义悬停效果。
使用 SCSS 制作悬停效果
现在,让我们深入研究 SCSS 代码,并阐明悬停效果的关键部分。在这里,我们应用了各种 SCSS 规则和 CSS 自定义属性来创建引人入胜的视觉效果。
/* Base styling for the button */
button {
–color: #a972cb; /* Button color */
–hover: #ef6eae; /* Hover color */
color: var(–color); /* Applying the color */
background: none;
border: 2px solid var(–color); /* Border with the color of the button */
font: inherit;
line-height: 1;
margin: 0.5em;
padding: 1em 2em;
transition: 0.25s; /* Transition time */
}
/* Styling for button hover/focus state */
button:hover,
button:focus {
color: #fff; /* White text on hover */
border-color: var(–hover); /* Border color change on hover */
box-shadow: inset 0 0 0 2em var(–hover); /* Inset box-shadow to create a fill effect */
}
选择器button定义了按钮的默认样式。我们使用 CSS 自定义属性(`color`--color和--hover`hover`)来设置按钮的颜色方案及其悬停状态。`color`transition属性允许我们为这些属性的变化添加动画效果,从而在悬停时创建平滑的填充效果。
当鼠标悬停或获得焦点时,我们会更新按钮的文本color,border-color并应用一个动画inset box-shadow来模拟填充效果。此变化以 0.25 秒的动画时间呈现,具体时间由选择器transition中的属性指定button。
页面样式总结
为了更直观地展示效果,我们添加了一些页面样式。但请记住,这些样式是针对此特定示例而设计的,在实际应用中,应根据您的实际需求进行调整。
/* Page styling */
body {
color: #fff;
background: hsl(227, 10%, 10%);
font: 300 1em ‘Fira Sans’, sans-serif;
justify-content: center;
align-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
display: flex;
}
/* Heading styling */
h1 {
font-weight: 400;
}
选择body器样式包括网页的字体、文本对齐方式和配色方案。该h1选择器用于设置标题的字体粗细。
现在,当鼠标悬停在“填写”按钮上时,我们就可以看到实际效果了。
要调整悬停效果以适应您网站的美学风格,只需修改 `<hover>`--color和--hover`<background>` CSS 变量即可。选择配色方案时,请务必考虑无障碍设计原则,因为按钮颜色和背景颜色之间的对比度对于提高可读性至关重要。圆角(通过 `<color>`border-radius属性设置)越来越受欢迎,其柔和的视觉效果也有助于提升用户体验。






