我想创建一个基因一样的旋转效果纯HTML和CSS。我可以动画整个div旋转，但我不知道如何使它从下向上逐渐水平旋转。这是可能的通过纯HTML和CSS？如果这是可能的，任何想法如何做到这一点？
hivapdat1#
创建多个div并设置它们的动画，每个div都有一个延迟。第一个
cunj1qz12#
1.在第一帧中将元素旋转特定Angular x1.在第二帧中将元素旋转-xAngular1.旋转回x1.重复（如果我们想要连续的动画）
@keyframes tilt-shaking { 0% { transform: rotate(0deg); } 25% { transform: rotate(5deg); } 50% { transform: rotate(0eg); } 75% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } }
这个过程和上面的完全一样，只是用x轴平移代替了旋转。这是为了你想要的水平动画。
@keyframes horizontal-shaking { 0% { transform: translateX(0) } 25% { transform: translateX(5px) } 50% { transform: translateX(-5px) } 75% { transform: translateX(5px) } 100% { transform: translateX(0) } }
2条答案
按热度按时间hivapdat1#
创建多个div并设置它们的动画，每个div都有一个延迟。
第一个
cunj1qz12#
1.在第一帧中将元素旋转特定Angular x
1.在第二帧中将元素旋转-xAngular
1.旋转回x
1.重复（如果我们想要连续的动画）
这个过程和上面的完全一样，只是用x轴平移代替了旋转。这是为了你想要的水平动画。