EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

.flying_maiden {
    display: none;
    position: fixed; right: 20px;  bottom: 20px;
    cursor: help;
    z-index: 99999;
  font-size:12px;
}

.flying_maiden_button{
    background-color: rgb(231, 76, 60);  
    padding: 0px;
    width: 100px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    border-radius: 50%;
    position: absolute;
    left: -85px;
    font-size: 16px;
    line-height: 30px;
    height: 100px;
    top: -40px;
}

.flying_maiden_close {
  position: absolute;
  right: 0;
  top: 0;
  color: #258BA2;
  cursor: pointer;
  font-size: 24px;
}

.flying_maiden_banner1 {
  width:230px;
  height:260px;
  background-image: url('http://i.imgur.com/qhrbHpE.png');
  animation: mymove 0.5s steps(5) infinite;;
  -webkit-animation: mymove 0.5s steps(5) infinite;
}

@keyframes mymove
{
  0%   {background-position:0px 0px;}
  100% {background-position:-1150px 0px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
  0%   {background-position:0px 0px;}
  100% {background-position:-1150px 0px;}
}

.flying_maiden_gliding {
  animation: flying_maidengliding 7s infinite;
  -webkit-animation: flying_maidengliding 7s infinite;
  margin-right: 0px;    
}
@keyframes flying_maidengliding
{
  0%   {margin-right: 0px}
  50%  {margin-right: 40px}
  100% {margin-right: 0px}
}

@-webkit-keyframes flying_maidengliding
{
  0%   {margin-right: 0px}
  50%  {margin-right: 40px}
  100% {margin-right: 0px}
}

.flying_maiden_wobble {
  animation:flying_maidenwobble 2s infinite;
  -webkit-animation:flying_maidenwobble 2s infinite;
  margin-bottom: 0px;
}

@keyframes flying_maidenwobble
  {
    0%   {margin-bottom: 0px}
    50%  {margin-bottom: 10px}
    100% {margin-bottom: 0px}
  }

@-webkit-keyframes flying_maidenwobble
  {
    0%   {margin-bottom: 0px}
    50%  {margin-bottom: 10px}
    100% {margin-bottom: 0px}
  }

.flying_maiden_text_small {
    font-size: small;
}
.flying_maiden_info {
    background-color: #2eb0cc;
    color: #fff;
    padding: 42px 20px 0 20px;
    margin-top: -10px;
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    text-align: center;
    margin-left: -50px;
    opacity: 1;
    font-size: 18px;
    line-height: 160%;
    font-weight: 700;
    
    opacity:0;
}
.flying_maiden:hover .flying_maiden_info {
    animation: fadein 0.2s;
    -moz-animation: fadein 0.2s; /* Firefox */
    -webkit-animation: fadein 0.2s; /* Safari and Chrome */
    -o-animation: fadein 0.2s; /* Opera */
  opacity:1;
}

@keyframes fadein{
    from {opacity:0;}
    to {opacity:1;}
}

@-webkit-keyframes fadein{
    from {opacity:0;}
    to {opacity:1;}
}
.flying_maiden_text_big {
    font-size: x-large;
    /* padding: 10px; */
    /* margin: 10px; */
    line-height: 180%;
}

HTML

Recommendation

Join Effecthub.com