,可以通过以下步骤实现:
<div class="circle-container"></div>
.circle-container {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ccc;
}
@keyframes shake {
0% { transform: rotate(0deg); }
25% { transform: rotate(5deg); }
50% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
100% { transform: rotate(0deg); }
}
.shake {
animation: shake 0.5s infinite;
}
然后,通过JavaScript来为圆形容器添加或移除颤动效果的类名,例如:
var container = document.querySelector('.circle-container');
container.classList.add('shake'); // 添加颤动效果
container.classList.remove('shake'); // 移除颤动效果
<div class="circle-container">
<input type="radio" name="option" value="option1">
</div>
可以根据需要添加更多的单选按钮,并设置不同的value值。
这样,就可以在圆形容器内创建一个颤动的单选按钮了。根据具体的应用场景和需求,可以进一步调整样式和动画效果。
领取专属 10元无门槛券
手把手带您无忧上云