|
|
|
|
|
Пропуск №: 1
Регистрация: 20.11.2013
Ранг: Легенда
Сообщений: 1366
|
|
| Слышу гимн зашитых ртов |
 |
|
|
|
|
 Дата: Пятница, 01.02.2019, 16:44/ Сообщение №: 1
|
|
Довольно интересное и уникальное решение для кнопки загрузки/скачивания файлов. Данная кнопка анимируется и добавляет красивый эффект при клике по ней. Стиль, цвет и т.д. вы сможете изменить под ваши потребности в коде 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() {
}
});
})();
Тихо на улице, пусто в квартире..Спасибо реактору №4
|
|
|
|
|
|
|
|
){kind=link}