设置过渡动画
设置过渡动画的维度
过渡的属性
可以分开设置也可以一起设置
一起设置
transition: 属性值 过渡周期;
分开设置属性值
选择增加过渡动画的属性：可以设置多个属性其中用逗号分隔
transition-property:CSS属性;
设置过渡动画的周期：可以设置多个周期对应多个属性，用逗号分隔
transition-duration：时间;
设置过渡动画变化的速度：
默认为ease
linear设置线性速度,ease-in：由慢到快
使用cubic-bezier()函数在浏览器中自己调节
transition-timing-function:属性值;
设置延迟时间：
transition-delay: 延迟时间;
制作点击悬浮过渡动画
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#d1{
width: 100px;
height: 150px;
background: skyblue;
margin: 20px auto;
box-shadow: 0px 0px 0px #ccc;
transition: all 0.5s ease;
}
#d1:hover{
box-shadow: 5px 5px 10px #999;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
3730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
