gpt4 book ai didi

javascript - 像 DVD 一样弹跳的文字动画

转载 作者:太空宇宙 更新时间:2023-11-04 09:25:01 26 4
gpt4 key购买 nike

我在热门网站上做了很多研究,但我无法找到这种弹跳和飞行的动画。

Demo

我想在我的网页上添加飞行和弹跳水印。

最佳答案

您可以使用translate 函数开发弹跳和飞行效果

#circle{
width:50px;
height:100px;
background:red;
border-radius:50%;
margin-top:100px;
}
p{
text-align:center;
color:yellow;
}
.bounce{
animation:bounce 5s linear 100;
}
@keyframes bounce{
0%{
transform:translate(0px,0px);

}
25%{
transform:translate(100px,100px);

}
50%{
transform:translate(200px,0px);
background:green;
}
75%{
transform:translate(100px,-100px);


}
100%{
transform:translate(0px,0px);

}
}
<div id="circle" class="bounce"><p> your text here</p></div>

关于javascript - 像 DVD 一样弹跳的文字动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41177542/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com