Jump to content
  • 0

Не удается скопировать CSS анимацию


Miha1l
 Share

Question

Здравствуйте, наткнулся на простую CSS анимацию свойством animation, но что-то она у меня не запускается - просто стоит посередине кнопки и все. Помогите пожалуйста.

Пытаюсь скопировать "перелив" с кнопки Смотреть тут http://ma******.ru/



.b-button_animation {
    animation: 4s ease 0s normal none infinite running flash-button;
    background-image: -moz-linear-gradient(0px 0 , rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.6) 45%, rgba(255, 255, 255, 0) 50%);
    background-position: -150px -150px, 0 0;
    background-size: 250% 450%, 100% 100%;
}

.b-button_common-black {
    background: #686868; /* Old browsers */
    background: -moz-linear-gradient(top,  #686868 0%, #2a2a2c 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #686868 0%,#2a2a2c 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #686868 0%,#2a2a2c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#686868', endColorstr='#2a2a2c',GradientType=0 ); /* IE6-9 */
    height: 65px;
    width: 270px;
    -webkit-border-radius: 65px;
    -moz-border-radius: 65px;
    border-radius: 65px;
}

.b-button {
    display: inline-block;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
    text-align: center;
}


 

HTML кнопки



<div class="b-button b-button_common-black"><a href="#" class="b-button_animation>Нажми меня!</a></div>


 

Edited by Miha1l
Link to comment
Share on other sites

2 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By ZeteM
      Всем привет! Пытаюсь сделать анимацию так, чтобы второй блок появлялся только после того, как первый полностью уйдёт влево. Ну просто никак, пыталась нагуглить, но получается только одновременное движение двух блоков. Может, кто-то опытный хотя бы намекнёт, что не так в моём коде? 
      https://codepen.io/20ZeteM02/pen/WNwwEEp
    • By Highlander
      Подскажите кто сталкивался с анимированием эффекта нажатия через animation? Через transition  понятно как, но вот тут http://landing-animation.powercode.pro/ верхние правые кнопки уж очень приятно выглядят, пробовал повторить через инспектор, но безуспешно. Или где-то ошибаюсь или есть какая-то особенность. 
      Спасибо.
    • By Vic-Tor
      Подскажите пожалуйста, как сделать паузу мерцания текста, что бы по глазам не било сильно?
      Посмотреть образец  тут.
      info-box {
      width : 96%;
      background : #c2ddf9;
      border : #CD0000 solid 1px;
      color : #CD0000; font-weight: 800;
      line-height : 19px;
      animation: blur .99s ease-out infinite;
      text-shadow: 0px 0px 2px #fff, 0px 0px 2px #fff;
      }
      @keyframes blur {
        from {
          text-shadow:0px 0px 5px #fff,
            0px 0px 4px #fff, 
            0px 0px 5px #fff,
            0px 0px 5px #fff,
            0px 0px 5px #fff,
            0px 0px 5px #fff,
            0px 0px 9px #fff,
            0px 0px 9px #fff,
            0px 0px 9px #fff,
            0px 0px 9px #fff,
            0px 0px 9px #CD0000,
            0px 0px 9px #CD0000,
            0px 10px 12px #4A708B,
            0px 10px 12px #4A708B,
            0px 10px 12px #4A708B,
            0px 10px 12px #4A708B,
            0px -10px 12px #4A708B,
            0px -10px 11px #4A708B;
        }
      }
      СПАСИБО!
    • By Alarr
      Доброго всем дня.
      Нужно сделать так, чтобы на фоне сайта дымился дым (клубился, вращался и.т.д), всегда, а в некоторых блоках дым должен двигаться, сжиматься или расширяться в зависимости от проскроливания страницы.
      Пожалуйста, подскажите, как это сделать лучше всего?
      Поставить на фон видео? Но его нельзя будет контролить скролом.
    • By kattiperk
      Здравствуйте. Как осуществить такую анимацию - https://dribbble.com/shots/1296229-Animation-Rectify-Stats
      От нее нужен сам круг и цифры в центре, ну и эффект тоже.
      На SVG? Вдруг у кого-то есть пример, поделитесь, пожалуйста.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy