等距的社交媒体图标

时间：2018-07-21 11:50:21

标签： html css isometric social-media

根据this视频教程，我试图对社交媒体图标进行等距悬停效果。

问题是未渲染棱镜的侧面，如下所示。这些面孔是在... a:before和... a:after选择器中定义的，这些选择器在那里（我通过检查页面进行了验证）。

div.col-md-12{
  padding: 0;
}
div.social-media{
  min-height: 200px;
  background-color: darkgray;

}
ul.social{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 0;
  margin: 0;
  display: flex;

}
ul.social li{
  list-style: none;
  margin: 0 40px;
}
ul.social li a .fab{
  font-size: 40px;
  color: #262626;
  line-height: 80px;
  transition: .5s;

}
ul.social li a{
  position: relative;
  width: 80px;
  height: 80px;
  display: block;
  background-color: #fff;
  text-align: center;
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
  box-shadow: -20px 20px 10px rgba(0.0,0,.5);
  transition: .5s;
}
ul.social li a:before {
  content: '';
  position: absolute;
  top: 10px;
  left: -20px;
  height: 100%;
  width: 20px;
  color: red;
  transition: .5s;
  transform: rotate(0deg) skewY(-45deg);
  box-sizing: border-box !important;
}
ul.social li a:after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: -10px;
  height: 20px;
  width: 100%;
  color: red;
  transition: .5s;
  transform: rotate(0deg) skewx(-45deg);
  box-sizing: border-box !important;
}
ul.social li a:hover{
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px,-20px);
  box-shadow: -50px 50px 50px rgba(0.0,0,.5);
}

ul.social li a:hover i.fa-facebook-f{
  color:#3B5998;
}
ul.social li a:hover i.fa-google-plus-g{
  color:#DB4437;
}
ul.social li a:hover i.fa-twitter{
  color:#1DA1F2;
}
ul.social li a:hover i.fa-snapchat-ghost{
  color:#FFFC00;
}
ul.social li a:hover i.fa-instagram{
  color:#9b6954;
}
ul.social li a:hover i.fa-telegram{
  color:#0088cc;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
</head>
<body>

<footer class="footer-bottom">
  <div class="container-fluid">
    <div class=" social-media row">
        <div class="col-md-12 mahi">
          <div>
            <ul class="social">
              <li>
                <a class="" title="facebook">
                <i class="fab fa-facebook-f fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="google plus">
                <i class="fab fa-google-plus-g fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="twitter">
                <i class="fab fa-twitter fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="snapchat">
                <i class="fab fa-snapchat-ghost fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="instagram">
                <i class="fab fa-instagram fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="telegram">
                <i class="fab fa-telegram fa-lg fa-2x"></i>
               </a>
              </li>
            </ul>
            </body>

how it should look like

1 个答案:

答案 0 :(得分：1)

您正在使用color css属性，该属性定义文本颜色。改用background或background-color：

background-color: red;

其他注意事项：

  • 在可以避免的情况下，我们建议不要使用!important，并且可以避免使用（您可以直接控制html）。
  • 应为a::before和a::after（两个冒号而不是一个）；这些不是伪类，而是伪元素。不管哪种方式，它都可以工作，但是在将来的浏览器中可能不工作，并且目前尚不清楚实际发生的情况。

div.col-md-12{
  padding: 0;
}
div.social-media{
  min-height: 200px;
  background-color: darkgray;

}
ul.social{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 0;
  margin: 0;
  display: flex;

}
ul.social li{
  list-style: none;
  margin: 0 40px;
}
ul.social li a .fab{
  font-size: 40px;
  color: #262626;
  line-height: 80px;
  transition: .5s;

}
ul.social li a{
  position: relative;
  width: 80px;
  height: 80px;
  display: block;
  background-color: #fff;
  text-align: center;
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
  box-shadow: -20px 20px 10px rgba(0.0,0,.5);
  transition: .5s;
}
ul.social li a::before {
  content: '';
  position: absolute;
  top: 10px;
  left: -20px;
  height: 100%;
  width: 20px;
  background-color: pink;
  transition: .5s;
  transform: rotate(0deg) skewY(-45deg);
  box-sizing: border-box !important;
}
ul.social li a::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: -10px;
  height: 20px;
  width: 100%;
  background-color: red;
  transition: .5s;
  transform: rotate(0deg) skewx(-45deg);
  box-sizing: border-box !important;
}
ul.social li a:hover{
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px,-20px);
  box-shadow: -50px 50px 50px rgba(0.0,0,.5);
}

ul.social li a:hover i.fa-facebook-f{
  color:#3B5998;
}
ul.social li a:hover i.fa-google-plus-g{
  color:#DB4437;
}
ul.social li a:hover i.fa-twitter{
  color:#1DA1F2;
}
ul.social li a:hover i.fa-snapchat-ghost{
  color:#FFFC00;
}
ul.social li a:hover i.fa-instagram{
  color:#9b6954;
}
ul.social li a:hover i.fa-telegram{
  color:#0088cc;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
</head>
<body>

<footer class="footer-bottom">
  <div class="container-fluid">
    <div class=" social-media row">
        <div class="col-md-12 mahi">
          <div>
            <ul class="social">
              <li>
                <a class="" title="facebook">
                <i class="fab fa-facebook-f fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="google plus">
                <i class="fab fa-google-plus-g fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="twitter">
                <i class="fab fa-twitter fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="snapchat">
                <i class="fab fa-snapchat-ghost fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="instagram">
                <i class="fab fa-instagram fa-lg fa-2x"></i>
               </a>
              </li>

              <li>
                <a class="" title="telegram">
                <i class="fab fa-telegram fa-lg fa-2x"></i>
               </a>
              </li>
            </ul>
            </body>

相关问题
最新问题