css3实现顶部社会化分享按钮示例-前端开发

本文主要讲解如何使用CSS3实现顶部社会化分享按钮，并提供两条示例说明。下面是操作步骤：

本文主要讲解如何使用CSS3实现顶部社会化分享按钮，并提供两条示例说明。下面是操作步骤：

一、准备工作

首先，在html文件中加入如下代码：

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

<body>
    <div class="social-links">
        <a href="#" class="facebook"></a>
        <a href="#" class="twitter"></a>
        <a href="#" class="google-plus"></a>
        <a href="#" class="linkedin"></a>
        <a href="#" class="pinterest"></a>
        <a href="#" class="rss"></a>
    </div>
</body>

以上代码是在页面中添加一个社会化分享按钮的div容器以及每个社会化分享按钮的超链接。css文件的路径视情况而定。

二、实现步骤

接下来，实现CSS3实现顶部社会化分享按钮。CSS3提供了3D变换、动画、过渡等多种效果，它的应用可以让你的网站变得更加生动、有趣。下面是具体实现步骤：

1. 设置社会化分享按钮的样式

通过CSS属性设置社会化分享按钮的宽度、高度、圆角半径、背景颜色等样式。示例如下：

.social-links a {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px;
  border-radius: 50%;
  text-indent: -9999px;
  background-repeat: no-repeat;
  background-position: center;
}

2. 设置社会化分享按钮的图标

为了让社会化分享按钮显得更加生动和有趣，可以通过设置背景图片的方式来显示社会化分享按钮的图标。同时，也可以通过Web字体等方式显示图标。示例如下：

.facebook {
  background-image: url(img/facebook-logo.png);
}

.twitter {
  background-image: url(img/twitter-logo.png);
}

.google-plus {
  background-image: url(img/google-plus-logo.png);
}

.linkedin {
  background-image: url(img/linkedin-logo.png);
}

.pinterest {
  background-image: url(img/pinterest-logo.png);
}

.rss {
  background-image: url(img/rss-icon.png);
}

3. 设置社会化分享按钮悬浮时的效果

为了让社会化分享按钮看起来更加生动，可以为社会化分享按钮设置鼠标悬浮的变化效果，比如阴影、旋转、放大等。示例如下：

.social-links a:hover {
  opacity: 0.9;
  box-shadow: 0px 0px 8px #444;
  -webkit-transform: rotate(360deg) scale(1.2);
  -moz-transform: rotate(360deg) scale(1.2);
  -o-transform: rotate(360deg) scale(1.2);
  transform: rotate(360deg) scale(1.2);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

三、两条样式示例

我们来看一下两条社会化分享按钮样式示例：

示例1：基础

.social-links a {
    display: inline-block;
    width: 36px;
    height: 36px;
    margin-right: 5px;
    margin-bottom: 8px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
    color: white;
    font-size: 16px;
    background-color: #333;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.6;
    vertical-align: middle;
    text-decoration: none;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease-in-out;
}

.social-links a:hover {
    opacity: 1;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-3px);
}
.facebook {
    background-image: url("https://xianzhang.oss-cn-shenzhen.aliyuncs.com/share/facebook.svg");
}

.twitter {
    background-image: url("https://xianzhang.oss-cn-shenzhen.aliyuncs.com/share/twitter.svg");
}

.google {
    background-image: url("https://xianzhang.oss-cn-shenzhen.aliyuncs.com/share/google.svg");
}

示例1是一个比较经典的社会化分享按钮样式。它通过设置背景颜色、圆角、图标、阴影、hover时的动画效果等属性，使得分享按钮看起来比较精致。

示例2：装饰

.social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.social a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    background-color: #3c3c3c;
    transition: all 0.2s;
    box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.4);
    overflow: hidden;
}

.social a:nth-child(1) {
    background-color: #39579a;
}

.social a:nth-child(2) {
    background-color: #4099ff;
}

.social a:nth-child(3) {
    background-color: #dc4e41;
}

.social a:nth-child(4) {
    background-color: #0077b5;
}

.social a:nth-child(5) {
    background-color: #0088cc;
}

.social a i {
    transition: all 0.2s;
}

.social a:hover i {
    transform: scale(1.5);
}

.social a span {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    display: none;
}

.social a:hover span {
    display: inline-block;
}

示例2实现了一个看起来比较装饰性的社会化分享按钮效果，通过使用Flex布局、CSS伪类等方式，达到了比较复杂的效果。

以上是使用CSS3实现顶部社会化分享按钮的攻略以及两条示例说明。希望能对大家有所帮助。