前端实现动画的方法

最新推荐文章于 2024-07-11 17:14:12 发布

LuckXinXin

最新推荐文章于 2024-07-11 17:14:12 发布

阅读量882

点赞数 1

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/LuckXinXin/article/details/105240082

版权

本文介绍了如何使用CSS3实现动画效果，包括transition的使用来响应鼠标悬停时元素尺寸的变化，transform属性的旋转、缩放、移动和倾斜应用，以及animation创建从一种样式到另一种样式的平滑过渡。同时提到了jQuery的animate方法和原生JavaScript实现动画的方式，以及利用事件触发如onmouseover、onmouseleave，并结合setInterval和setTimeout控制动画流程。

摘要由CSDN通过智能技术生成

使用css3实现动画：transition animation transform
1）transition:-----设置变化的属性的值

//默认值为all  0 ease 0
transition: property duration timing-function delay;

实现鼠标放到div上，div的宽度会变大

div{
   
 width:100px;
 height:100px;
 background:blue;
 transition:width 2s;
 -moz-transition:width 2s; /* Firefox 4 */
 -webkit-transition:width 2s; /* Safari and Chrome */
 -o-transition:width 2s; /* Opera */
}
 
div:hover{
   
  width:300px;
}