我想使div的(仅包含文本)背景幻灯片从左到右滑动,我该怎么做? 我可以使用CSS过渡使其淡入,但无法弄清楚如何使其滑入。
.container{
display:inline;
padding:10px;
transition: background-color 2s;
}
.container:hover{
background-color:lightcoral;
}
<div class='container'>
some text here
</div>
答案 0 :(得分:-1)
<style>
div {
height: 40px;
width: 70%;
background: black;
margin: 50px auto;
border-radius: 5px;
position: relative;
}
#rect {
animation-name: slide;
animation-duration: 4s;
}
@keyframes slide {
0% {
left: 0px;
}
50% {
left: 50px;
}
100% {
left: 50px;
}
}
</style>
<div id="rect"></div>
您可以尝试使用像这样的关键帧动画。改编自:https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/create-movement-using-css-animation