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

在本实验中,你将学习如何使用 HTML 和 CSS3 创建动画社交分享按钮。这些按钮使用 Font Awesome 库来提供图标,并通过 CSS 样式实现平滑的悬停过渡效果。通过本指南的学习,你将获得一组美观且响应式的社交按钮,可以将其集成到任何网站中。
要使用 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 {属性: 值;}
设置选中超链接的效果。在本实验中,我们学习了以下内容:
本实验使用 CSS 将静态图标转换为具有动态效果的按钮。CSS 不仅可以为重复的样式设置统一的样式以提高网页开发效率,还可以根据网页的需求设置多种元素,以达到美化网页并增强用户使用体验的目的。