css3不规则运动 |文本框css只读

/* 1. 旋转动画 */
div {
width: 100px;
height: 100px;
background-color: coral;
position: relative;
-webkit-animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
}
}
/* 2. 弹跳动画 */
div {
width: 100px;
height: 100px;
position: relative;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0px);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
/* 3. 摇晃动画 */
div {
width: 100px;
height: 100px;
background-color: coral;
position: relative;
-webkit-animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) infinite;
}
@-webkit-keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}

上述代码展示了三种不同的不规则运动效果，分别是旋转动画、弹跳动画和摇晃动画。其中使用了CSS3中的@keyframes和transform属性实现动画效果。

不规则运动效果让网页更具有视觉冲击力，提高了用户体验。但是在实际开发中，需要注意不影响网页的加载速度和性能，同时要避免过度使用不规则运动效果，影响网页整体的风格和风格统一性。