欢迎您来到

Sailisi TrueOs

微软电脑管家V2.4-推荐安装系统清理软件

微软电脑管家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 属性:

  • transition
  • opacity
  • box-shadow 该transition: all .3s;声明告诉浏览器效果将持续 0.3 秒,适用于所有过渡类型。然后我们使用hover选择器来调整按钮的不透明度和框阴影。就这么简单,当我们将鼠标悬停在按钮上时,我们之前定义的框阴影会添加一些不透明度,强调凸起的效果(给人一种它离光源更近的错觉)。

多田!我们不需要添加任何东西,我们的按钮现在可以正常工作了。

结语 在这篇文章中,我们看到了如何使用过渡和框阴影创建一个简单的 CSS 凸起按钮。如果您想分享您的想法或提出问题,请在评论部分试一试。我希望你和我一样喜欢这个小课程,并希望很快在 Css 上再次见到你。