Sailisi TrueOs
微软电脑管家V2.4 版本描述:
微软电脑管家UI界面全面升级,优化一键加速、全面体检、进程管理、病毒查杀等功能,新增开机启动项管理功能
1、系统存储空间(C盘清理、大文件管理)管理功能; 2、优化部分功能,提升稳定性; 3、优化一键加速; 4、进程管理; 5、病毒查杀; 6、开机启动项管理功能; 7、弹窗拦截功能;
体积小,microsoft原装出口;
序 这是一个非常快速的教程,我们将只使用 CSS制作一个外观漂亮的按钮。
<div class="container">
<h1 class="title">Raised Button</h1>
<h3 class="subtitle">How to create a button that gives the impression to be raised on hover.
<div class="button-wrapper">
<button class="ninja-button">Hover me</button>
</div>
</div>
$muted-grey: #999;
$purple: #8300ff;
$white: #fff;
$base-shadow: rgba(0, 0, 0, 0.12);
$purple-shadow-from: rgba(131, 0, 255, 0.42);
$purple-shadow-to: rgba(131, 0, 255, 0.2);
$purple-box-shadow: 0 14px 26px -12px $purple-shadow-from, 0 4px 23px 0px $base-shadow, 0 8px 10px -5px $purple-shadow-to;
.container {
max-width: 600px;
position: absolute;
left: 0;
right: 0;
top: 50%;
margin: 0 auto;
text-align: center;
transform: translateY(-50%);
.title {
font-family: 'Pacifico';
font-size: 3rem;
margin: 10px 0;
}
.subtitle {
font-family: 'Lato';
color: $muted-grey;
font-weight: 400;
}
.button-wrapper {
padding : 20px 0;
.ninja-button {
padding: 15px 50px;
text-transform: uppercase;
background: $purple;
border: 2px solid $purple;
color: $white;
font-weight: 600;
font-size: .75rem;
border-radius: 50px;
cursor: pointer;
transition: all .4s;
&:hover {
opacity: 0.8;
box-shadow: $purple-box-shadow;
}
}
}
}
配置 在开始之前,我们需要导入一些我们将使用的基本资产:2 种 Google 字体,即Pacifico和Lato,以使内容看起来更好。这就是我们所需要的。
太平洋:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
拉图:
<link href="https://fonts.googleapis.com/css?family=Lato"
rel="stylesheet">
HTML 标记 让我们从创建我们的 html 结构开始。我们只需要一个容器来容纳我们的按钮:
<div class="container">
<h1 class="title">Raised Button</h1>
<h3 class="subtitle">How to create a button that gives the impression do be raised on hover.
<div class="button-wrapper">
<button class="ninja-button">Hover me</button>
</div>
</div>
按钮包装元素只是为了给按钮一些间距。如您所见,我们使用了一个简单的 HTML元素,但您也可以使用一个元素。现在让我们深入研究 CSS,它是所有魔法发生的地方。
添加样式 让我们开始添加样式。我们将首先快速处理演示和布局样式。
演示风格 首先,我们需要添加演示样式:
.container {
max-width: 600px;
position: absolute;
left: 0;
right: 0;
top: 50%;
margin: 0 auto;
text-align: center;
transform: translateY(-50%);
.title {
font-family: 'Pacifico';
font-size: 3rem;
margin: 10px 0;
}
.subtitle {
font-family: 'Lato';
color: $muted-grey;
font-weight: 400;
}
}
那里没什么特别的,只是一些基本知识来确定容器的大小和居中。但是,从上面的代码中仍然可以学到一个有用的技巧。查看容器样式,并注意它的位置。它被设置为absolute。然后我们使用top: 50%;垂直将容器推到屏幕中央。润色效果的最后一件事是添加一个transform: translateY(-50%);以准确居中元素。
声明变量 我们的小项目需要一些变量。让我们宣布他们:
$muted-grey: #999;
$purple: #8300ff;
$white: #fff;
$base-shadow: rgba(0, 0, 0, 0.12);
$purple-shadow-from: rgba(131, 0, 255, 0.42);
$purple-shadow-to: rgba(131, 0, 255, 0.2);
$purple-box-shadow: 0 14px 26px -12px $purple-shadow-from, 0 4px 23px 0px $base-shadow, 0 8px 10px -5px $purple-shadow-to;
首先,我们声明我们需要的 3 种颜色。第二部分是事情变得有趣的地方。我们将使用 CSSbox-shadow属性来实现我们的凸起效果。如果你不知道这个 CSS 属性,你可以阅读这篇文章来了解更多。
我们在这里做什么 ?rgba我们首先声明一个基础阴影,它基本上只是一种以格式表示的黑色阴影。RGBA 将Alpha Channel(处理透明度)添加到 RGB 格式。然后我们声明我们紫色阴影的 2 个变体,一个比另一个不透明两倍。最后,我们声明我们的主框阴影变量 ( $purple-box-shadow),它混合了我们之前创建的其他框阴影变量。现在,我们拥有了设计和完成按钮所需的一切。
按钮样式 我们不需要太多的 CSS 来完成我们的按钮。让我们深入了解:
.container {
.button-wrapper {
padding : 20px 0;
.ninja-button {
padding: 15px 50px;
text-transform: uppercase;
background: $purple;
border: 2px solid $purple;
color: $white;
font-weight: 600;
font-size: .75rem;
border-radius: 50px;
cursor: pointer;
transition: all .4s;
&:hover {
opacity: 0.8;
box-shadow: $purple-box-shadow;
}
}
}
}
我们不会谈论该.button-wrapper元素,因为它只是在这里为我们的按钮提供一些额外的间距。
我们也不会过多谈论按钮的美学和颜色,因为它非常个人化并且与您正在从事的项目类型相关。我们主要是想分解一下凸起的效果,看看鼠标悬停在按钮上会发生什么。重要的是以下 3 个 CSS 属性:
多田!我们不需要添加任何东西,我们的按钮现在可以正常工作了。
结语 在这篇文章中,我们看到了如何使用过渡和框阴影创建一个简单的 CSS 凸起按钮。如果您想分享您的想法或提出问题,请在评论部分试一试。我希望你和我一样喜欢这个小课程,并希望很快在 Css 上再次见到你。