我只是想知道如何将 display: none
和 display: block
添加到我的动画中并具有缓动效果。
HTML
<div class="floating-vociebox">
<a>New updates</a>
</div>
任何帮助将不胜感激
最佳答案
我尝试从 display:none;
开始。我有三个变体来通过 CSS3 和 jQuery 添加移动和淡入。哪一个更符合您的需求?
$( document ).ready(function(){
$('.variant-1').fadeIn( 3000 ).addClass('animate-1');
$('.variant-2').css('display','block').delay( 0 ).queue(function(){
$(this).addClass('animate-2').dequeue();
});
$('.variant-3').addClass('visible').delay( 0 ).queue(function(){
$(this).addClass('animate-2').dequeue();
});
});
.floating-vociebox {
background-color: blue;
width: 120px;
height: 30px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.19);
border-radius: 4px;
position: fixed;
top: 100px;
transform: translateY(-90px);
display: none;
}
.variant-1 {
left: 10px;
transition: background-color 0.3s, transform 3s ease-in-out;
}
.variant-2 {
left: 150px;
}
.variant-3 {
left: 290px;
}
.variant-2,
.variant-3 {
opacity: 0;
transition: background-color 0.3s, opacity 3s ease-in, transform 3s ease-in-out;
}
.visible {
display: block;
}
.animate-1 {
transform: translateY(0);
}
.animate-2 {
opacity: 1;
transform: translateY(0);
}
.floating-vociebox:hover {
background-color: darkblue;
}
.floating-vociebox a {
cursor: pointer;
display: block;
text-align: center;
line-height: 30px;
font-size: 14px;
font-weight: 500;
color: #fff;
}
<div class="floating-vociebox variant-1">
<a>Variant 1</a>
</div>
<div class="floating-vociebox variant-2">
<a>Variant 2</a>
</div>
<div class="floating-vociebox variant-3">
<a>Variant 3</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
关于html - 如何使用不显示阻止的css3制作向下滑动动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37031417/