анимация кнопки на js
DVV,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.blick-container {
overflow: hidden;
position: relative;
margin-bottom: -15px !important;
}
.blick-button {
text-align: center;
transition: all .3s;
border: none;
position: relative;
font-size: 15px;
background-color: #c79c6e;
padding: 14px 40px 13px;
font-family: Roboto, sans-serif;
font-weight: 400;
width: auto;
color: #fff;
background-repeat: no-repeat;
display: inline-block;
font-size: 18px;
text-decoration: none;
font-family: 'PT Serif', serif;
font-weight: 400;
}
.blick {
position: absolute;
-webkit-border-radius: 10em;
border-radius: 10em;
background-color: #fff;
width: 0px;
height: 0px;
animation: animBlick 3s infinite;
}
@keyframes animBlick {
0% {
width: 0;
margin-top: 0;
min-height: 0;
height: 0;
opacity: 1;
}
50% {
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
opacity: 0;
}
100% {
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
opacity: 0;
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const blicks = document.querySelectorAll(".blick");
const op = [{
x: [220, 250],
y: [-50, 150]
}, {
x: [-50, 0],
y: [-50, 150]
}];
const rnd = arr => {
let [min, max] = arr;
return Math.trunc(min + Math.random() * (max - min))
}
const pos = i => {
let { x, y } = op[i];
x = rnd(x);
y = rnd(y);
return { x, y }
}
const show = _ => blicks.forEach(el => {
let { x, y } = pos(Math.random() * 2 | 0);
let obj = {
left: `${x}px`,
top: `${y}px`
}
Object.assign(el.style, obj)
})
setInterval(show, 3000)
});
</script>
</head>
<body>
<a href="http://" target="_blank" class="blick-button blick-container">
<span class="blick"></span>
<span>Перейти на сайт проекта</span></a>
<a href="http://" target="_blank" class="blick-button blick-container">
<span class="blick"></span>
<span>Перейти на сайт проекта</span></a>
</body>
</html>
|