• pda
  • 04.04.2018

  • 16:19

  • 87

  • 0

АНИМИРОВАННАЯ КНОПКА ДЛЯ СКАЧИВАНИЯ С ИСПОЛЬЗОВАНИЕМ SVG И VUE

  • Разработчик:

    pda
1.0

Проголосовало

3
Оценить мод

Довольно интересное и уникальное решение для кнопки загрузки/скачивания файлов. Данная кнопка анимируется и добавляет красивый эффект при клике по ней. Стиль, цвет и т.д. вы сможете изменить под ваши потребности в коде CSS 



Подключаем Vue



Код
<p><script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js'></script> 

<script src='https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.2.1/vue-resource.min.js'></script></p>




HTML

 



Код
<p><code><div class="site-canvas" id="app"> 

  <div class="download-button" </code></p>

<p><code>@click="download = !download" :class="{'downloading':download}"> 

  <div class="download-button_icon"> 

  <span></span> 

  <span></span> 

  <span></span> 

  </div> 

  <div class="download-button_text"> 

  Download 

  </div> 

  <transition name="fade"> 

  <div class="files" v-if="download"> 

  <svg v-for="i in [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"</code></p>

<p><code>:style="fileStyles()" viewBox="0 0 8 8" class="file"> 

  <path d="M0 0v8h7v-4h-4v-4h-3zm4 0v3h3l-3-3z"></path>  

  </svg> 

  </div> 

  </transition> 

  </div> 

</div></code></p>

 



CSS



Код
<p><code>.download-button { 

  position:fixed; 

  margin:auto; 

  top:0; 

  left:0; 

  right:0; 

  bottom:0; 

  width:120px; 

  height:120px; 

  background:#5757ff; 

  border-radius:5px; 

  box-shadow:0 10px 20px rgba(0,0,0,0.2); 

  transition:250ms transform, 250ms box-shadow; 

  cursor:pointer; 



.download-button:hover { 

  transform:scale(0.95); 

  box-shadow:0 4px 8px rgba(0,0,0,0.1); 





.download-button_icon { 

  position:absolute; 

  margin:auto; 

  top:10px; 

  left:0; 

  right:0; 

  width:80px; 

  height:80px; 



.download-button_icon span { 

  position:absolute; 

  margin:auto; 

  top:0; 

  left:0; 

  right:0; 

  bottom:0; 

  width:4px; 

  height:50px; 

  background:#fff; 

  border-radius:4px; 

  content:''; 





.download-button_icon span:nth-child(2), 

.download-button_icon span:nth-child(3) { 

  top:35px; 

  height:25px; 

  left:16px; 

  transform:rotate(45deg); 



.download-button_icon span:nth-child(3) { 

  left:-16px; 

  transform:rotate(-45deg); 





.download-button_text { 

  position:absolute; 

  left:0; 

  right:0; 

  bottom:0; 

  color:#fff; 

  text-align:center; 

  font-size:1em; 

  font-weight:700; 

  padding:15px 0; 



.files { 

  position:relative; 

  margin-top:130px; 

  text-align:center; 



.files .file { 

  width:15px; 

  fill:#5757ff; 

  animation:800ms fallingFile infinite ease-in; 



@keyframes fallingFile { 

  0%{opacity:0;transform:translate3d(0,-40px,0) rotate(0deg);} 

  60%{opacity:1;} 

  100%{opacity:0;transform:translate3d(0,120px,0) rotate(90deg);} 





.fade-enter-active, .fade-leave-active { 

  transition: opacity .5s; 



.fade-enter, .fade-leave-to { 

  opacity: 0; 

}</code></p>

 



JS



Код
<p><code>(function(){ 

  var app = new Vue({ 

  el: '#app', 

  data: { 

  download: false 

  }, 

  methods: { 

  fileStyles: function() { 

  let delay = -(Math.floor(Math.random() * 10) * 254); 

  let duration = (Math.floor(Math.random() * 11) + 9) * 100; 

  return { 

  'animation-delay' : delay + 'ms', 

  'animation-duration' : duration + 'ms' 

  } 

  } 

  }, 

  mounted() { 

   

  } 

  }); 

})();</code></p>
Порядок установки:
Ссылка
BB-Code
HTML-код
:)