CSS--实现<按钮 3D 分层悬停效果>

概要

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。熟练掌握CSS的基本原理可以实现更好的页面交互效果，提升用户的使用体验。

代码实现

新建文件夹social-3d-hover，social-3d-hover下新建index.html和style.css文件，index.html引入本地font-awesome字体库或者CDN上的资源

目录结构

/**
social-3d-hover
   ├─ fontawesome-free-5.11.2-web
   ├─ index.html
   └─ style.css
*/

index.html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./fontawesome-free-5.11.2-web/css/all.min.css">
  <link rel="stylesheet" href="style.css">
  <title>按钮 3D 分层悬停效果</title>
</head>
<body>
  <div class="icons">
    <a href="#">
      <div class="layer">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span class="fab fa-facebook-f"></span>
      </div>
      <span class="text">Facebook</span>
    </a>
    <a href="#">
      <div class="layer">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span class="fab fa-twitter"></span>
      </div>
      <span class="text">Twitter</span>
    </a>
    <a href="#">
      <div class="layer">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span class="fab fa-instagram"></span>
      </div>
      <span class="text">Instagram</span>
    </a>
    <a href="#">
      <div class="layer">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span class="fab fa-linkedin-in"></span>
      </div>
      <span class="text">Linkedin</span>
    </a>
    <a href="#">
      <div class="layer">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span class="fab fa-youtube"></span>
      </div>
      <span class="text">Youtube</span>
    </a>
  </div>
</body>
</html>

style.css代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: #000;
}

html, body {
  display: grid;
  height: 100%;
  place-items: center;
  background: #000;
}

.icons {
  display: inline-flex;
}

.icons a {
  margin: 0 25px;
  text-decoration: none;
  color: #fff;
  display: block;
  position: relative;
}

.icons a .layer {
  width: 55px;
  height: 55px;
  transition: all .3s;
  /* border: 1px solid #fff; */
}

.icons a:hover .layer {
  transform: rotate(-35deg) skew(20deg);
}

.icons a .layer span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 1px solid #fff;
  border-radius: 5px;
  transition: all .3s;
}

.icons a:hover .layer span:nth-child(1) {
  opacity: 0.2;
}

.icons a:hover .layer span:nth-child(2) {
  opacity: 0.4;
  transform: translate(5px, -5px);
}

.icons a:hover .layer span:nth-child(3) {
  opacity: 0.6;
  transform: translate(10px, -10px);
}

.icons a:hover .layer span:nth-child(4) {
  opacity: 0.8;
  transform: translate(15px, -15px);
}

.icons a:hover .layer span:nth-child(5) {
  opacity: 1;
  transform: translate(20px, -20px);
}

.icons a:nth-child(1) .layer span,
.icons a:nth-child(1) .text {
  color: #4267B2;
  border-color: #4267B2;
}

.icons a:nth-child(2) .layer span,
.icons a:nth-child(2) .text {
  color: #1DA1F2;
  border-color: #1DA1F2;
}

.icons a:nth-child(3) .layer span,
.icons a:nth-child(3) .text {
  color: #E1306C;
  border-color: #E1306C;
}

.icons a:nth-child(4) .layer span,
.icons a:nth-child(4) .text {
  color: #2867B2;
  border-color: #2867B2;
}

.icons a:nth-child(5) .layer span,
.icons a:nth-child(5) .text {
  color: #ff0000;
  border-color: #ff0000;
}

.icons a:hover:nth-child(1) .layer span {
  box-shadow: -1px 1px 3px #4267B2;
}

.icons a:hover:nth-child(2) .layer span {
  box-shadow: -1px 1px 3px #1DA1F2;
}

.icons a:hover:nth-child(3) .layer span {
  box-shadow: -1px 1px 3px #E1306C;
}

.icons a:hover:nth-child(4) .layer span {
  box-shadow: -1px 1px 3px #2867B2;
}

.icons a:hover:nth-child(5) .layer span {
  box-shadow: -1px 1px 3px #E1306C;
}

.icons a .layer span.fab {
  font-size: 30px;
  line-height: 55px;
  text-align: center;
}

.icons a .text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5px;
  opacity: 0;
  transition: bottom .3s ease, opacity .3s ease;
}

.icons a:hover .text {
  bottom: -35px;
  opacity: 1;
}

效果展示

posted @ 2021-07-25 23:06  Elwin0204  阅读(138)  评论(0)  编辑  收藏  举报