MEGA-NEWS - игровой портал, объединяющий в себе множество новостей и публикаций, огромный форум с игротекой и конечно же русскоговорящее комьюнити.
6686
44
30
новостей в ленте
тем на форуме
пользователей
Будь в курсе
Это интересно
Загружай и играй
в разработке...
Вступай в команду
Правила форума Форум игрового портала MEGA-NEWS
ФОРУМ MEGA-NEWS – сообщество пользователей игрового портала.
Форум - это место, где можно обсудить игровые новости и обновления, задать вопросы, разместить объявления в барахолке, дать объявления о предоставляемых вами услугах, поделиться полезной информацией и способами, вступить в команду портала (на должности модератора, журналиста), а также найти себе друзей и товарищей для общения и совместного времяпровождения в играх.
Все действия (общение и размещение информации) регламентируются правилами форума.
ТОП-5 по сообщениям
ТОП-5 по репутации
  • Страница 1 из 1
  • 1
Форум » Web-раздел » Скрипты uCoz » Разное » Анимированная кнопка для скачивания с использованием SVG и V
Анимированная кнопка для скачивания с использованием SVG и V
#1
Менеджер проекта
Менеджер проекта
Статус:
Offline
Регистрация:
11.03.2016
Сообщения:
270

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

Подключаем Vue:
Код
<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>

HTML:
Код
<div class="site-canvas" id="app">
  <div class="download-button" @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]" :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>

CSS:
Код
.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;
}

JS:
Код
(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() {
   
  }
  });
})();
Форум » Web-раздел » Скрипты uCoz » Разное » Анимированная кнопка для скачивания с использованием SVG и V
  • Страница 1 из 1
  • 1
Поиск:
Условия предоставления информации
Контакты
В помощь пользователям
Навигация