【前言】
如何在网页中实现动画效果?
- 动态图片
- Flash
- JavaScript
【小知识】
CSS变形是一些效果的集合,如平移、旋转、缩放、倾斜效果
变形函数: translate():平移 div:hover{transform:translate(10px,10px)}
scale():扩大 div:hover{transform:scale(10)}
rotate():旋转 div:hover{transform:rotate(-30deg)}
skew():倾斜 div:hover(transform:skew(-30deg)}
过渡
第一个参数: 鼠标触及时自动变长
<style>
div{background:red;
width:50px;
height;50px;
transition:width 2s ease-in-out
}
div:hover{width:100px}
</style>
</head>
<body>
<div>111</div>
</body>
第二个参数:
过渡动画函数(transition-timing-function):指定浏览器的过渡速度,以及过渡期间的进展情况,通过给过渡添加一个函数来指定动画的快慢方式
ease:速度由快到慢(默认值)
linear:速度恒速(匀速运动)
ease-in:速度越来越快(渐显效果)
ease-out:速度越来越慢(渐稳效果)
ease-in-out:速度先加速再减慢(渐显渐稳效果)
第三个参数:当鼠标触及时延迟3秒图形开始变化
长和宽共同变化
动画使用过程:animation
<style>
@Keyframes BruceLi {
0%{ width:0;}
33%{ width:30px;}
66%{ width:150px;}
100%{ width:0;
}
div{
background:red;
width:50px;
height:50px
}
div:hover{
animation:BruceLi 3s
}
</style>
</head>
<body>
<div>111</div>
</body>