HTML小球上下回彈代碼介紹
<html>
<head>
<style type="text/css">
#ball {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
border-radius: 25px;
background-color: #0099FF;
animation: bounce 1s linear infinite;
}
@keyframes bounce {
0%, 100% {
top: 0px;
}
50% {
top: 150px;
}
}
</style>
</head>
<body>
<div id="ball"></div>
</body>
</html>代碼解析
該代碼使用了HTML和CSS，實現了一個球形元素在不斷上下回彈的效果。
首先在CSS中定義了一個id為ball的元素，設置其位置為絕對定位，初始時top和left值為0，元素的寬和高都是50px，邊框半徑為25px，背景顏色為#0099FF。此外，還設置了一個animation屬性，該屬性定義了一個bounce動畫，其時間為1s，速度為線性，無限循環。接下來，在keyframes中定義了動畫效果，0%和100%時，ball元素的top值都為0px，而在50%時，其top值為150px，即球向下移動了150px。這樣就實現了一個簡單的上下回彈效果。
最后，在body中嵌入了一個id為ball的div元素，作為球形元素的容器。