【问题标题】:CSS Sprite fade animationCSS Sprite 淡入淡出动画
【发布时间】:2015-01-17 21:09:02
【问题描述】:

我基本上需要使精灵元素具有淡入淡出动画而不是滚动效果(不透明动画而不是背景位置)。我怎么能用css3或js做到这一点,但没有jquery?有没有办法不使用像素,而是使用 % 或 rems (在下面的代码中)来定位元素?

.youtube {
    background-position: -256px -256px;
    &:hover {
        background-position: -256px -384px;
    }
}

这里是小提琴:http://jsfiddle.net/zvj89o0o/1/

【问题讨论】:

    标签: css css-transitions fadein css-animations sprite


    【解决方案1】:

    背景位置:x% y%;

    实际上,百分比背景位置是这样的:

    • 横坐标0%时,图像的左侧对齐容器的左侧。
    • abscissa100%时,图片右侧与容器右侧对齐。
    • 中间值是线性计算的。

    同样,

    • 纵坐标0%时,图像的顶部对齐容器的顶部。
    • 纵坐标100%时,图片底边与容器底边对齐。
    • 中间值是线性计算的。

    你的问题

    在您的问题中,精灵容器的横坐标可能有 3 个理想值0%50%100%,并且可能有 4 个理想值 表示纵坐标:0%33.33%66.66%100%。见下图:

    为了添加淡入淡出效果,在普通元素上方添加一个伪元素:before。现在,相应地定位背景并添加悬停效果以进行褪色。

    更新片段:

    body {
      background: #141414;
    }
    .sprites {
      position: relative;
      display: block;
    }
    a {
      display: inline-block;
      margin-top: 6px;
    }
    .youtube,
    .pinterest,
    .vk,
    .facebook,
    .twitter,
    .instagram {
      width: 125px;
      height: 125px;
      background: url(http://i.imgur.com/xGT3jFF.png) 0 0 no-repeat;
      -webkit-transition: all 300ms ease-in-out;
      -moz-transition: all 300ms ease-in-out;
      transition: all 300ms ease-in-out;
      float: left;
      display: block;
      margin-right: 5px;
    }
    .youtube:before,
    .pinterest:before,
    .vk:before,
    .facebook:before,
    .twitter:before,
    .instagram:before {
      position: absolute;
      width: 125px;
      height: 125px;
      content: "";
      background: url(http://i.imgur.com/xGT3jFF.png) 0 0 no-repeat;
      transition: 0.5s ease;
    }
    .youtube {
      background-position: 100% 100%;
    }
    .youtube:before {
      background-position: 100% 66.6666%;
    }
    .youtube:hover:before {
      transition: 0.5s ease;
      opacity: 0;
    }
    .pinterest {
      background-position: 50% 100%;
    }
    .pinterest:before {
      background-position: 50% 66.6666%;
    }
    .pinterest:hover:before {
      transition: 0.5s ease;
      opacity: 0;
    }
    .vk {
      background-position: 0% 100%;
    }
    .vk:before {
      background-position: 0px 66.6666%;
    }
    .vk:hover:before {
      transition: 0.5s ease;
      opacity: 0;
    }
    .facebook {
      background-position: 100% 33.333%;
    }
    .facebook:before {
      background-position: 100% 0%;
    }
    .facebook:hover:before {
      transition: 0.5s ease;
      opacity: 0;
    }
    .twitter {
      background-position: 50% 33.3333%;
    }
    .twitter:before {
      background-position: 50% 0%;
    }
    .twitter:hover:before {
      transition: 0.5s ease;
      opacity: 0;
    }
    .instagram {
      background-position: 0% 33.33333%;
    }
    .instagram:before {
      background-position: 0% 0%;
    }
    .instagram:hover:before {
      transition: 0.5s ease;
      opacity: 0;
    }
    <div class="sprites">
      <a class="instagram" href="http://instagram.com"></a>
      <a class="twitter" href="https://twitter.com"></a>
      <a class="facebook" href="https://fb.com"></a>
      <a class="vk" href="https://vk.com"></a>
      <a class="pinterest" href="https://pinterest.com"></a>
      <a class="youtube" href="https://youtube.com"></a>
    </div>

    【讨论】:

      【解决方案2】:
      .youtube {
          background-position: -256px -256px;
          transition-property:opacity;
          transition-duration:0.5s;
          opacity:1;
          &:hover {
              background-position: -256px -384px;
              opacity:0.5;
          }
      }
      

      注意我添加的新属性

      【讨论】:

      • 嗯,动画不好看)其实这是一个问题,让它正常淡出而不跳层
      猜你喜欢
      • 2019-02-11
      • 2016-05-12
      • 1970-01-01
      • 2014-01-20
      • 2012-12-18
      • 2013-11-27
      • 2015-09-08
      • 1970-01-01
      • 2011-09-09
      相关资源
      最近更新 更多