CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)

以下是详细的攻略步骤：

一、创建HTML结构

首先，我们需要在HTML中创建菜单的结构。如下所示：

<div class="menu-container">
  <div class="menu-item">Item 1</div>
  <div class="menu-item">Item 2</div>
  <div class="menu-item">Item 3</div>
  <div class="menu-item">Item 4</div>
  <div class="menu-item">Item 5</div>
</div>

二、创建CSS样式

首先，我们需要设置菜单容器的样式，使其能够具有半透明效果。代码如下：

.menu-container {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  height: 200px;
  width: 200px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在这段CSS样式中，我们使用了background属性来设置菜单容器的背景颜色。由于我们需要实现透明效果，这里使用了rgba()函数，并将其第四个参数设置为0.5，表示透明度为50%。

border-radius属性用于设置容器的边框圆角半径，从而让它成为圆形的菜单容器。

box-shadow属性用于为容器添加一个黑色的阴影效果。这里我们使用了rgba()函数，将阴影的颜色设置为黑色，并将其透明度设置为0.5 ，以便使其看起来像是半透明的阴影。

height和width属性用于设置容器的高度和宽度，这里我们将其都设置为200px。

padding属性用于设置容器内部的填充区域，这里我们将其设置为20px，以便让内容不会太过挤在一起。

position属性用于设置菜单容器的定位方式。在这里，我们将其设置为absolute，这样它才能够相对于页面进行绝对定位。

top和left属性用于设置菜单容器的位置，这里我们将其都设置为50%，表示将其置于页面的中央位置。

transform属性用于在top和left属性的基础上，将菜单容器沿X轴和Y轴进行平移。它的值为translate(-50%, -50%)，表示将菜单容器沿着X轴和Y轴都向左上方移动50%，这样就可以让其恰好处于页面的正中心位置。

接下来，我们需要为每个菜单项设置样式，使它们能够具有半透明效果和圆角边框。代码如下：

.menu-item {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #fff;
}

在这段CSS样式中，我们使用了同样的rgba()函数和border-radius属性，以便为每个菜单项添加半透明效果和圆角边框。

padding属性用于设置菜单项的内部填充区域，我们将其设置为10px，以便让内容不会太过挤在一起。

margin属性用于设置菜单项的外边距，我们将其设置为10px，以便在菜单项之间留出一些空白。

text-align属性用于设置菜单项的文本对齐方式，我们将其设置为center，以便让文本居中对齐。

font-family属性用于设置菜单项的字体族，这里我们使用了Google Fonts提供的'Open Sans'字体。

font-size属性用于设置菜单项的字体大小，我们将其设置为16px。

color属性用于设置菜单项的文本颜色，我们将其设置为#fff，表示白色。

三、添加字体文件

由于我们使用了'Open Sans'字体，因此我们需要将其字体文件下载到本地，并将其引入到页面中。通常，我们可以将字体文件放在项目中的“fonts”文件夹中。

在页面中引入字体文件的代码如下：

@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Regular.ttf') format('truetype');
}

在这段CSS样式中，我们使用了@font-face规则，以便将下载的字体文件引入到页面中。

font-family属性用于指定字体的名称，这里我们将其设置为'Open Sans'。

src属性用于指定字体文件的位置和格式。如上代码所示，我们将其设置为字体文件在'fonts'文件夹中的位置，并指定其格式为'TrueType'。

四、添加交互效果

最后，我们需要添加一些交互效果，以便让菜单项在被鼠标悬停时能够放大并且变成白色。

我们可以使用CSS3的transform属性来实现放大效果，并使用过渡效果来让其有个平滑的过渡。同时，当菜单项被悬停时，我们可以使用hover伪类来改变它的背景颜色和字体颜色。代码如下：

.menu-item:hover {
  background-color: #fff;
  color: #333;
  cursor: pointer;
  transform: scale(1.2);
  transition: all 0.3s ease;
}

在这段CSS样式中，我们使用了hover伪类，以便在菜单项被悬停时应用样式。

background-color属性用于改变菜单项的背景颜色，我们将其设置为白色(#fff)。

color属性用于改变菜单项的文本颜色，我们将其设置为黑色(#333)。

cursor属性用于改变鼠标的形状，并让其看起来像是一个指针，以便让用户知道他们可以点击这个菜单项。

transform属性用于将菜单项沿着X轴和Y轴方向进行放大，我们将其设置为1.2，表示将菜单项放大到原来大小的1.2倍。

transition属性用于设置过渡效果，并为它指定过渡的持续时间、曲线以及延迟，这样就可以让放大效果都有个平滑的过渡。

两条示例

示例一

下面是一个把整个代码封装在一个HTML文件中的示例：

<!DOCTYPE html>
<html>
<head>
  <title>CSS3 Circle Menu</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* menu container */
    .menu-container {
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      height: 200px;
      width: 200px;
      padding: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    /* menu items */
    .menu-item {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 10px;
      padding: 10px;
      margin: 10px;
      text-align: center;
      font-family: 'Open Sans', sans-serif;
      font-size: 16px;
      color: #fff;
    }
    .menu-item:hover {
      background-color: #fff;
      color: #333;
      cursor: pointer;
      transform: scale(1.2);
      transition: all 0.3s ease;
    }
    /* font-face */
    @font-face {
      font-family: 'Open Sans';
      src: url('fonts/OpenSans-Regular.ttf') format('truetype');
    }
  </style>
</head>

<body>
  <div class="menu-container">
    <div class="menu-item">Item 1</div>
    <div class="menu-item">Item 2</div>
    <div class="menu-item">Item 3</div>
    <div class="menu-item">Item 4</div>
    <div class="menu-item">Item 5</div>
  </div>
</body>

</html>

示例二

下面是一个使用CSS样式表文件的示例:

在项目中创建以下两个文件： circle-menu.html 和 circle-menu.css

<!DOCTYPE html>
<html>
<head>
  <title>CSS3 Circle Menu</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="circle-menu.css">
</head>

<body>
  <div class="menu-container">
    <div class="menu-item">Item 1</div>
    <div class="menu-item">Item 2</div>
    <div class="menu-item">Item 3</div>
    <div class="menu-item">Item 4</div>
    <div class="menu-item">Item 5</div>
  </div>
</body>

</html>

/* menu container */
.menu-container {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  height: 200px;
  width: 200px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* menu items */
.menu-item {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #fff;
}
.menu-item:hover {
  background-color: #fff;
  color: #333;
  cursor: pointer;
  transform: scale(1.2);
  transition: all 0.3s ease;
}
/* font-face */
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Regular.ttf') format('truetype');
}

在这个示例中，我们使用了一个单独的CSS样式表文件来存放所有CSS样式，而不是将其直接放在HTML文件中。这样可以提高代码的复用性和维护性，并且也有利于更好的代码组织。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS3+font字体文件实现圆形半透明菜单具体步骤(图解) - Python技术站