html 用Sass动画的社交按钮

Posted 2021-05-11

// Importing bourbon to make things easy: http://bourbon.io/
@import "bourbon"

// Useful mixins
@mixin border-radius($radius: 4px)
  @include prefixer(border-radius, $radius, webkit moz spec)

@mixin box-sizing($box-model)
  @include prefixer(box-sizing, $box-model, webkit moz spec)
    
//useful for animation
@include keyframes(fadeInRight)
  0%
    opacity: 0
    @include transform(translateX(1.334em) translateZ(0))
  100%
    opacity: 1

@mixin fadeInRight($dur: 1s, $delay: 0s, $fill: forwards)
  @include prefixer(animation, fadeInRight $dur $delay $fill, webkit spec)

    
/* General styles */

body
  background-color: white
  font-family: 'Lato', Arial, sans-serif
  text-align: center
  padding-top: 30px
  
h1
  font-size: 1.5em
  color: #666
  
h2, a
  font-size: 0.8em
  color: #00a1b2
  
.social
  margin: 60px auto
  
/* ============================ */
/* SOCIAL ICONS                 */
/* ============================ */

$color-base: #00B285
$num-buttons: 5
$speed: 0.6s

.social-icon
  @include prefixer(background-clip, padding-box, webkit moz spec)
  @include box-sizing(border-box)
  @include border-radius(3px)

  @include transition-property(background-color)
  @include transition-duration(0.5s)
  @include transition-timing-function(ease)

  background-color: #c4c4c4
  text-align: center
  display: inline-block
  width: 40px
  height: 38px
  padding: 9px 0px
  color: white
  margin: 2px
  
  /* Color each button differently */
  @for $i from 1 through $num-buttons
    &:nth-child(#{$i})
      /* Animation */
      @include fadeInRight($speed, ($i/4) * 1s )
      opacity: 0
      /* Color */
      &:hover,
      &:active,
      &:focus
        opacity: 1
        background-color: adjust-hue( $color-base, $i * 7%)
  
  img
    width: 20px
    
/* ============================ */
/* TOOLTIP                      */
/* ============================ */

$tooltip-height: 22px
$tooltip-arrow-size: 5px
$tooltip-color: #323232
$tooltip-color-text: #ecf0f1

[data-tooltip]
  position: relative
  
  &:before,
  &:after
    @include transform(translateX(-50%))
    @include box-sizing(content-box)
    @include position(absolute, 100% null null 50%)
    
    @include transition-property(opacity)
    @include transition-duration(0.2s)
    @include transition-timing-function(linear)
      
    position: absolute
    left: 50%
    top: 100%
    bottom: 100%
    visibility: hidden
    opacity: 0
    z-index: 9999
    // Force Hardware Acceleration
    -webkit-transform: translate3d(0, 0, 0)
    -moz-transform: translate3d(0, 0, 0)
    transform: translate3d(0, 0, 0)
    
  /* tooltip arrow */   
  &:before
    content: ''
    border-color: $tooltip-color
    border-style: none
    border: $tooltip-arrow-size solid transparent
    border-bottom: $tooltip-arrow-size +1px solid $tooltip-color
    margin-top: $tooltip-arrow-size * -1 + 1

  /* tooltip box */
  &:after
    content: attr(data-tooltip)
    @include border-radius(3px)
    width: auto
    height: $tooltip-height
    padding: $tooltip-height/2 $tooltip-height/2 0 $tooltip-height/2
    font-size: 13px
    line-height: $tooltip-height/2
    white-space: nowrap
    background-color: $tooltip-color
    color: $tooltip-color-text
    margin-top: 7px
      
  &:hover,
  &:focus
    background-color: transparent
    &:before,
    &:after
      @include transform(translate(-50%, 0))
      opacity: 1
      visibility: visible

Social buttons animated with Sass
---------------------------------
Social buttons with different colors and tooltip on hover, using Sass.

A [Pen](https://codepen.io/PixelCode95/pen/jwqveJ) by [Paolo Latoja](http://codepen.io/PixelCode95) on [CodePen](http://codepen.io/).

[License](https://codepen.io/PixelCode95/pen/jwqveJ/license).

<!-- SVG Icons not working anymore because of Broken website of hosted icons -->
<!-- Needs Update! -->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">

<h1>Social icons with tooltips</h1>
<h2>CSS  (SASS)  ONLY</h2>

<div class="social">
  
  <a class="social-icon" data-tooltip="[e-mail]" href="mailto:[e-mail]">
    <img src="http://arthcamara.com/public/icons/envelope.svg" />
  </a>

  <a class="social-icon" data-tooltip="GitHub" href="https://github.com/NewbieCoder95">
    <img src="http://arthcamara.com/public/icons/github.svg" />
  </a>

  <!--
  <a class="social-icon" data-tooltip="LinkedIn" href="https://se.linkedin.com/in/arthurcamara1">
    <img src="http://arthcamara.com/public/icons/linkedin.svg" />
  </a>
-->
  <a class="social-icon" data-tooltip="Twitter" href="https://twitter.com/p_latoja95">
    <img src="http://arthcamara.com/public/icons/twitter.svg" />
  </a>

  <a class="social-icon" data-tooltip="Facebook" href="https://www.facebook.com/platoja95">
    <img src="http://arthcamara.com/public/icons/facebook.svg" />
  </a>

</div>

<a href="https://codepen.io/PixelCode95" target="blank">This is my CodePen Profile</a>