使用 CSS 创建动态社交分享按钮

CSSCSSBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在本实验中,你将学习如何使用 HTML 和 CSS3 创建动画社交分享按钮。这些按钮使用 Font Awesome 库来提供图标,并通过 CSS 样式实现平滑的悬停过渡效果。通过本指南的学习,你将获得一组美观且响应式的社交按钮,可以将其集成到任何网站中。

动画社交按钮演示

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/text_styling("`Text Styling`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/IntermediateStylingGroup -.-> css/pseudo_classes("`Pseudo-classes`") css/IntermediateStylingGroup -.-> css/pseudo_elements("`Pseudo-elements`") css/DynamicStylingGroup -.-> css/transformations("`Transformations`") subgraph Lab Skills css/selectors -.-> lab-179618{{"`使用 CSS 创建动态社交分享按钮`"}} css/text_styling -.-> lab-179618{{"`使用 CSS 创建动态社交分享按钮`"}} css/display_property -.-> lab-179618{{"`使用 CSS 创建动态社交分享按钮`"}} css/pseudo_classes -.-> lab-179618{{"`使用 CSS 创建动态社交分享按钮`"}} css/pseudo_elements -.-> lab-179618{{"`使用 CSS 创建动态社交分享按钮`"}} css/transformations -.-> lab-179618{{"`使用 CSS 创建动态社交分享按钮`"}} end

图标介绍

要使用 Font Awesome 图标,只需使用前缀 fa 后跟图标名称。

具体格式如下:<i class="fa ICON_NAME"></i>

要从图标库中引入所需的图标,请在 index.html 文件中编写以下代码:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Animated Social Sharing Buttons</title>

    <!--Icon Library-->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css"
    />
  </head>
  <body>
    <div>
      <i class="fa fa-facebook"></i>
      <i class="fa fa-twitter"></i>
      <i class="fa fa-google"></i>
      <i class="fa fa-instagram"></i>
      <i class="fa fa-pinterest"></i>
    </div>
  </body>
</html>

效果如下:

图片描述

使用伪类选择器可以在鼠标悬停在链接对象上时改变样式。因此,我们为图标添加一个空链接,或者你可以链接到相应的社交主页。

伪类语法:selector:pseudo-class {property:value;}

  • a:hover {property:value;} 设置鼠标悬停在链接上时显示的样式。

设置所需的类选择器,以便后续为相应的按钮设置样式。

<div class="social-btns">
  <a class="btn facebook" href="#"><i class="fa fa-facebook"></i></a>
  <a class="btn twitter" href="#"><i class="fa fa-twitter"></i></a>
  <a class="btn google" href="#"><i class="fa fa-google"></i></a>
  <a class="btn instagram" href="#"><i class="fa fa-instagram"></i></a>
  <a class="btn pinterest" href="#"><i class="fa fa-pinterest"></i></a>
</div>

效果预览:

图片描述

Font Awesome 图标变为蓝色,因为在应用 <a> 标签后,默认字体颜色为蓝色。

✨ 查看解决方案并练习

图标样式设置

在设置图标样式之前,我们在 index.html<head> 标签中添加 style.css 样式表。

<link rel="stylesheet" href="style.css" />

为了统一整体样式,在 style.css 中设置全局样式。

/* 全局样式设置 */
* {
  margin: 0;
  padding: 0;
}
a,
img {
  border: 0;
}
body {
  background: #eee;
}

为了美化 Font Awesome 字体提供的矢量图标,我们先设置它们的颜色。

.social-btns .btn.facebook .fa {
  color: #3b5998;
}
.social-btns .btn.twitter .fa {
  color: #00aff0;
}
.social-btns .btn.google .fa {
  color: #dc4a38;
}
.social-btns .btn.instagram .fa {
  color: #bf00ff;
}
.social-btns .btn.pinterest .fa {
  color: #cc0000;
}

效果预览:

图片描述

接下来,我们将设置图标在被触摸时立即放大并改变颜色。为了实现立即放大的效果,我们可以使用 transform: scale(0.8) 将图标缩小到原始大小的 80%,当触摸事件发生时,使用 transform: scale(1) 将其恢复到原始大小。

style.css 文件中输入以下代码:

.social-btns .btn .fa {
  /* 设置默认链接显示样式 */
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}
.social-btns .btn:focus .fa, /* 选择聚焦按钮样式 */
.social-btns .btn:hover .fa {
  /* 设置鼠标悬停链接显示样式 */
  color: #fff; /* 改变其颜色 */
  -webkit-transform: scale(1);
  transform: scale(1);
}
.social-btns .btn .fa {
  /* 设置 Font Awesome 提供的图标大小和垂直对齐方式 */
  font-size: 38px;
  vertical-align: middle;
}

效果预览:

图片描述
✨ 查看解决方案并练习

按钮样式设置

为了布局页面,我们将按钮居中显示在页面上,将其设置为块级内联元素,然后美化按钮。

display 属性指定生成的元素类型:

  • display:inline 将其设置为内联元素,与其他元素共享一行,即不独占一行。
  • display:block 将其设置为块级元素,并独占一行。
  • display:inline-block 结合上述两种方法,将其设置为不独占一行的块级元素。
.social-btns {
  height: 90px;
  margin: 80px auto;
  font-size: 0;
  text-align: center; /* 水平居中 */
}
.social-btns .btn {
  display: inline-block; /* 将按钮设置为不独占一行的块级元素 */
  background-color: #fff;
  width: 90px;
  height: 90px;
  line-height: 90px; /* 设置行高 */
  margin: 0 10px;
  text-align: center;
  position: relative; /* 设置为相对定位 */
  overflow: hidden; /* 隐藏溢出内容 */
  border-radius: 28%; /* 圆角 DIV */
  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1); /* 为 DIV 元素添加阴影 */
  opacity: 0.99; /* 指定不透明度。从 0.0 透明到 1.0 完全不透明 */
}

效果预览:

图片描述

我们发现,当按钮被触摸时,图标和按钮背景都是白色,不容易看清。因此,我们需要设置按钮背景的触摸样式。首先,我们需要使用 transform: rotate(45deg)btn:before 顺时针旋转 45°。然后调整 btn:before 的初始和最终位置。

图片描述

before 选择器:在元素内容之前插入新内容。

.social-btns .btn:before {
  /* 设置每个 btn 元素内容之前的 top 和 left 值,即未触摸时的 btn 位置 */
  top: 90%;
  left: -110%;
}
.social-btns .btn:focus:before,
.social-btns .btn:hover:before {
  /* 调整触摸时按钮的位置 */
  top: -10%;
  left: -10%;
}
.social-btns .btn:before {
  content: "";
  width: 120%;
  height: 120%;
  position: absolute;
  /* 将 btn:before 顺时针旋转 45° */
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* 设置 btn:before 颜色,即触摸后按钮的背景颜色 */
.social-btns .btn.facebook:before {
  background-color: #3b5998;
}
.social-btns .btn.twitter:before {
  background-color: #00aff0;
}
.social-btns .btn.instagram:before {
  background-color: #bf00ff;
}
.social-btns .btn.google:before {
  background-color: #dc4a38;
}
.social-btns .btn.pinterest:before {
  background-color: #cc0000;
}

效果预览:

图片描述

最后,我们对按钮进行过渡调整,主要使用 transition-timing-function 属性设置过渡效果的速度曲线,使其在视觉上更加平滑。

transition-timing-function 语法:

<cubic-bezier-easing-function> =
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

style.css 中添加以下样式:

.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
  transition: all 0.35s; /* 所有样式 0.35 秒缓动 */
  transition-timing-function: cubic-bezier(
    0.31,
    -0.105,
    0.43,
    1.59
  ); /* 指定过渡效果的速度 */
}

效果预览:

图片描述

注意:请点击右下角的 'Go Live' 以在 8080 端口运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。

知识扩展

我们不仅可以设置悬停在超链接上的效果,还可以使用伪类选择器为未访问、已访问和选中的超链接设置效果。

  • a:link {属性: 值;} 设置未访问超链接的效果。
  • a:visited {属性: 值;} 设置已访问超链接的效果。
  • a:active {属性: 值;} 设置选中超链接的效果。
✨ 查看解决方案并练习

总结

在本实验中,我们学习了以下内容:

  • Font Awesome 图标库的引用
  • CSS 伪类选择器
  • CSS transform 属性
  • display 属性
  • before 选择器

本实验使用 CSS 将静态图标转换为具有动态效果的按钮。CSS 不仅可以为重复的样式设置统一的样式以提高网页开发效率,还可以根据网页的需求设置多种元素,以达到美化网页并增强用户使用体验的目的。

您可能感兴趣的其他 CSS 教程