css html动画效果代码

CSS和HTML是实现网页动画效果的主要工具。HTML定义了页面的结构，CSS则控制了页面的样式和布局。代码如下：

/*定义动画*/@keyframes shake {
0% {
    transform: translate(0, 0);
}
25% {
    transform: translate(-10px, 0);
}
50% {
    transform: translate(10px, 0);
}
75% {
    transform: translate(-10px, 0);
}
100% {
    transform: translate(0, 0);
}
}
/*应用动画*/.button {
    animation-name: shake;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}
    

以上代码实现了一个简单的按钮抖动的动画效果。首先定义了一个名为“shake”的动画，其中使用了“transform”属性来控制按钮的位置变化。接着，将该动画应用于按钮元素，使用了“animation-name”、“animation-duration”和“animation-iteration-count”样式属性，分别设置动画名称、动画持续时间和重复次数。

另外， CSS还提供了许多其他的动画属性，例如“transition”、“transform”、“opacity”等等，可以实现更丰富的动画效果，例如渐变、旋转、缩放等等。HTML可以通过添加属性来控制动画的触发方式，例如“hover”、“click”等等。结合两者，可以实现各种酷炫的动画效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！