我正在尝试在site上同时制作线条的动画。动画本身可以,但是我不能将其附加到光标上作为示例。这是代码jsfiddle.net。不幸的是,无法从该网站窃取。那里的一切都很混乱。 谢谢大家的帮助。
var starttime = new Date().getTime();
$('.js-line-wave').on('mouseenter, mousemove', function(e) {
var elapsed = new Date().getTime() - starttime;
var pos = elapsed * 0.1;
$('.line, .button_wave, .line_item').each(function(index, letter) {
var posx = (pos + 10 * index);
console.log(posx);
var posy = Math.sin(posx / 60) * 20;
$(letter).css("transform", "translateY(" + posy + "px)");
});
});
.wrapper {
overflow: hidden;
padding-bottom: 1000px;
}
section.tp_section {
padding-top: 144px;
padding-bottom: 88px;
}
.container {
margin: 0 auto;
position: relative;
padding: 0 15px;
width: 100%;
max-width: 1196px;
}
.line_wave_block {
position: relative;
z-index: 3;
display: flex;
align-items: center;
margin: 95px 0 53px;
}
.line_wave_block .line {
display: block;
flex-basis: 100%;
position: relative;
z-index: -1;
}
.line_wave_block .line:before {
content: '';
width: 3px;
height: 4px;
display: block;
background-color: rgba(0, 174, 239, 0.5);
margin: 0 auto;
border-radius: 50%;
}
.button_wave,
.line_item {
position: relative;
flex-basis: 100%;
z-index: 3;
}
.button_wave {
cursor: pointer;
display: block;
}
.line_wave_block .button_wave::before {
content: '';
width: 33px;
height: 20px;
border-radius: 40px;
display: block;
background: linear-gradient(to bottom, #00EBDB, #008FF2);
}
.line_wave_block .button_wave:hover::before,
.line_wave_block .button_wave.active::before {
background: linear-gradient(to bottom, #FF8070, #FF5971);
}
.tons_text {
position: absolute;
bottom: -54px;
color: #5F42DF;
font-size: 27px;
line-height: 32px;
font-weight: 700;
width: 100%;
text-align: center;
}
.line_wave_block .line_item::before {
content: '';
width: 7px;
height: 23px;
border-radius: 40px;
display: block;
background: rgba(0, 174, 239, 0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<section class="tp_section tp_block js-tp">
<div class="container">
<div class="line_wave_block js-line-wave">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<a class="button_wave active" href="#tab1">
<div class="tons_text">
1,5
</div>
</a>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="line_item"></div>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<a class="button_wave" href="#tab2">
<div class="tons_text">
3
</div>
</a>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="line_item"></div>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="line_item"></div>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="line_item"></div>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="line_item"></div>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<a class="button_wave" href="#tab3">
<div class="tons_text">
5
</div>
</a>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="line_item"></div>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="line_item"></div>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="line_item"></div>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="line_item"></div>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="line_item"></div>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<a class="button_wave" href="#tab4">
<div class="tons_text">
10
</div>
</a>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="line_item"></div>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="line_item"></div>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="line_item"></div>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="line_item"></div>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="line_item"></div>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="line_item"></div>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="line_item"></div>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="line_item"></div>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<a class="button_wave" href="#tab5">
<div class="tons_text">
20
</div>
</a>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</section>
</div>