详解css3 Transition属性（平滑过渡菜单栏案例）

下面我来详细讲解“详解CSS3 Transition属性（平滑过渡菜单栏案例）”的完整攻略。

CSS3 Transition属性

CSS3 Transition属性可以让元素从一个状态平滑过渡到另一个状态。它常常用于鼠标悬停和点击效果上，使网页更加生动有趣。使用CSS3 Transition属性，可以让我们的网站变得更加美观、富有动感。

语法

CSS3 Transition属性拥有以下语法：

transition: property duration timing-function delay;

其中，各个参数的含义如下：

• property：过渡效果作用的CSS属性；
• duration：过渡的时间长度；
• timing-function：速度曲线，即动画的过渡效果；
• delay：延迟时间

例如，下面的代码表示将一个div在1秒钟内从不透明度0过渡到不透明度1，并且在过渡开始前延迟0.3秒：

div {
  opacity: 0;
  transition: opacity 1s ease-in-out 0.3s;
}
div:hover {
  opacity: 1;
}

示例

示例一：减缓图片的出现效果

下面的代码使用CSS3 Transition属性让图片的出现效果更加平滑：

img {
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}
img:hover {
  opacity: 1;
}

在这段代码中，图片的不透明度初始为0，当鼠标悬停时，不透明度变为1。由于设置了1.5秒的过渡时间，图片的出现效果将比较平滑。

示例二：平滑过渡菜单栏

下面的代码使用CSS3 Transition属性实现平滑过渡菜单栏：

HTML代码：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS代码：

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

nav li {
  float: left;
}

nav li a {
  display: block;
  padding: 10px 20px;
  color: white;
  text-align: center;
  text-decoration: none;
}

nav li a:hover {
  background-color: #111;
}

nav li a:active {
  background-color: red;
}

nav li a:not(:last-child) {
  border-right: 1px solid white;
}

nav li a {
  transition: background-color 0.5s ease-in-out;
}

在这段代码中，设置了菜单栏的背景颜色为深灰色#333，菜单项为白色。当鼠标悬停在菜单项上时，菜单项的背景颜色会由默认的白色变为深黑色#111，并且设置了0.5秒的过渡时间，让变化更加平缓。当用户点击菜单时，菜单项的背景颜色将变为红色，表示当前处于激活状态。

以上就是关于“详解CSS3 Transition属性（平滑过渡菜单栏案例）”的攻略讲解，希望可以对大家有所帮助。