我正在尝试实现类似于此页面“向下滚动图标”中显示的动画的动画。
这是我的尝试：
body {
background-color: black;
}
@keyframes anim {
0% { top: 18% }
30% { top: 18% }
50% { top: 100% }
51% { top: -50% }
70% { top: 18% }
100% { top: 18% }
}
#scroll-down-icon {
position: absolute;
left: 32px;
top: 32px;
border: 2.3px solid white;
width: 128px;
height: 128px;
border-radius: 64px;
}
h1 {
width: 100%;
height: 100%;
position: relative;
color: white;
font-size: 32px;
left: 0;
top: 18%;
text-align: center;
animation-name: anim;
animation-duration: 1.75s;
animation-delay: 1s;
animation-iteration-count: infinite;
}<div id="scroll-down-icon"><h1>╲╱</h1></div>但是，上面的代码并没有使内的h1真正“循环” #scroll-down-icon div。
我将如何解决此问题并使用CSS和HTML创建类似于页面中显示的效果？
div {
overflow:hidden;
cursor: pointer;
}
body {
background-color: black;
}
@keyframes anim {
0% { top: 18% }
30% { top: 18% }
50% { top: 100% }
51% { top: -50% }
70% { top: 18% }
100% { top: 18% }
}
#scroll-down-icon {
position: absolute;
left: 32px;
top: 32px;
border: 2.3px solid white;
width: 128px;
height: 128px;
border-radius: 64px;
}
h1 {
width: 100%;
height: 100%;
position: relative;
color: white;
font-size: 32px;
left: 0;
top: 18%;
text-align: center;
animation-name: anim;
animation-duration: 1.75s;
animation-delay: 1s;
animation-iteration-count: infinite;
}
div {
overflow:hidden;
cursor: pointer;
}<div id="scroll-down-icon"><h1>╲╱</h1></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句