如何添加和使用 CSS 注释→
如何使用纯 CSS 为图像添加高级悬停效果

在网页设计中，悬停效果因其易于实现而被广泛使用。
他们为添加了交互元素并使其设计良好，从而保持用户参与度。

悬停效果最常见的功能是突出显示文本链接或者按钮。
但是，它们还有其他功能，并且在应用于图像时可以产生强大的效果。

悬停是将鼠标游标放在对象上时发生的效果。
它主要用于样式和可用性。
与会减慢工作速度的动画不同，有了 CSS 悬停效果，就不会有这样的问题。

在本教程中，我们将展示如何仅使用 CSS 为图像添加创意悬停效果。

创建 HTML

  • 添加带有“图像”类的 <figure> 标签。

<figure> 标签用于指示自包含内容。

  • 使用 <img> 标签添加图像。
  • 使用 <figcaption> 标签为 <figure> 标签的内容添加标题或者解释。
<figure class="image">
  <img src="https://www.onitroad.com/static/img/logo.png" width="310" height="220" alt="Example image" />
  <figcaption>
    <h3>onitroad</h3>
  </figcaption>
</figure>

添加 CSS

  • 通过设置图像的最大宽度、最小宽度和最大高度来设置图像的样式。

将位置设置为“相对”，将溢出设置为“隐藏”。

添加 text-align 属性及其“center”值。

  • 添加“图像”类的过渡。

我们使用 *（星号）选择器来选择文档中的所有元素。

  • 将图像的最大宽度设置为 100%。另外，指定位置和不透明度。
  • 通过设置 <h3> 元素的背景和位置并指定 transform 属性来设置它的样式。

将 text-transform 设置为“uppercase”以使每个单词的所有字符都大写并定义 font-weight。

  • 设置 :before 伪元素的样式。

设置元素的高度和宽度并定义颜色。

指定过渡和变换属性，然后使用 :hover 伪类。

figure.image {
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  max-height: 220px;
  width: 100%;
  background: #000000;
  color: #eeeeee;
  text-align: center;
}
figure.image * {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
figure.image img {
  max-width: 100%;
  position: relative;
  opacity: 0.6;
}
figure.image h3 {
  position: absolute;
  left: 50px;
  right: 50px;
  display: inline-block;
  background: #000;
  -webkit-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
  -moz-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
  -o-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
  transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
  padding: 15px 5px;
  margin: 0;
  top: 50%;
  text-transform: uppercase;
  font-weight: 400;
}
figure.image:before {
  height: 130%;
  width: 130%;
  top: 0;
  left: 0;
  content: '';
  background: #cccccc;
  position: absolute;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: rotate(110deg) translateY(-50%);
  -moz-transform: rotate(110deg) translateY(-50%);
  -o-transform: rotate(110deg) translateY(-50%);
  transform: rotate(110deg) translateY(-50%);
}
figure.image:hover img,
figure.image.hover img {
  opacity: 1;
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
figure.image:hover h3,
figure.image.hover h3 {
  -moz-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
  -o-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
  transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
}
figure.image:hover:before,
figure.image.hover:before {
  -moz-transform: rotate(110deg) translateY(-150%);
  -o-transform: rotate(110deg) translateY(-150%);
  transform: rotate(110deg) translateY(-150%);
}

让我们把代码的各个部分放在一起。

添加悬停效果的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      figure.image {
        position: relative;
        overflow: hidden;
        margin: 10px;
        min-width: 220px;
        max-width: 310px;
        max-height: 220px;
        width: 100%;
        background: #000000;
        color: #eeeeee;
        text-align: center;
      }
      figure.image * {
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }
      figure.image img {
        max-width: 100%;
        position: relative;
        opacity: 0.6;
      }
      figure.image h3 {
        position: absolute;
        left: 50px;
        right: 50px;
        display: inline-block;
        background: #000;
        -webkit-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
        -moz-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
        -ms-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
        -o-transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
        transform: skew(-5deg) rotate(-10deg) translate(0, -50%);
        padding: 15px 5px;
        margin: 0;
        top: 50%;
        text-transform: uppercase;
        font-weight: 400;
      }
      figure.image:before {
        height: 130%;
        width: 130%;
        top: 0;
        left: 0;
        content: '';
        background: #cccccc;
        position: absolute;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        -webkit-transform: rotate(110deg) translateY(-50%);
        -moz-transform: rotate(110deg) translateY(-50%);
        -ms-transform: rotate(110deg) translateY(-50%);
        -o-transform: rotate(110deg) translateY(-50%);
        transform: rotate(110deg) translateY(-50%);
      }
      figure.image:hover img,
      figure.image.hover img {
        opacity: 1;
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
      }
      figure.image:hover h3,
      figure.image.hover h3 {
        -moz-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
        -ms-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
        -o-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
        transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
      }
      figure.image:hover:before,
      figure.image.hover:before {
        -moz-transform: rotate(110deg) translateY(-150%);
        -ms-transform: rotate(110deg) translateY(-150%);
        -o-transform: rotate(110deg) translateY(-150%);
        transform: rotate(110deg) translateY(-150%);
      }
    </style>
  </head>
  <body>
    <h2>Advanced hover effect</h2>
    <figure class="image">
      <img src="https://onitroad.com/static/img/logo.png" width="310" height="220" alt="Example image" />
      <figcaption>
        <h3>onitroad</h3>
      </figcaption>
    </figure>
  </body>
</html>

向 3D 变换元素添加悬停效果的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .example {
        width: 250px;
        height: 250px;
        margin: 20px auto 40px auto;
        perspective: 1000px;
      }
      .example a {
        display: block;
        width: 100%;
        height: 100%;
        background: url("/bg.jpg");
        background-size: cover;
        transform-style: preserve-3d;
        -webkit-transform: rotateX(80deg);
        -moz-transform: rotateX(80deg);
        -ms-transform: rotateX(80deg);
        -o-transform: rotateX(80deg);
        transform: rotateX(80deg);
        -webkit-transition: all 0.8s;
        -moz-transition: all 0.8s;
        -o-transition: all 0.8s;
        transition: all 0.8s;
      }
      .example:hover a {
        -webkit-transform: rotateX(10deg);
        -moz-transform: rotateX(10deg);
        -ms-transform: rotateX(10deg);
        -o-transform: rotateX(10deg);
        transform: rotateX(10deg);
      }
      .example a:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 20px;
        background: #cccccc;
        -webkit-transform: rotateX(60deg);
        -moz-transform: rotateX(60deg);
        -ms-transform: rotateX(60deg);
        -o-transform: rotateX(60deg);
        transform: rotateX(60deg);
        transform-oroirn: bottom;
      }
    </style>
  </head>
  <body>
    <h2>Advanced hover effect</h2>
    <div class="example">
      <a href="#"></a>
    </div>
  </body>
</html>
日期：2020-06-02 22:14:53 来源：oir作者：oir
如何添加和使用 CSS 注释→

目录

Copyright © 2017-2019 OnITRoad.com All rights reserved.  桂ICP备20001160号-1  关于 | 隐私和政策