过渡：作用使元素从一个样式变到另外一个样式，过度必须有触发事件：hover
属性：(1)过渡的css属性 必选
transition-prooerty：属性1，属性2，……；
以下属性可以过渡：
取值为颜色，取值为数值，阴影，背景渐变，转换transform
简写all
过渡的持续时间 必选transition-duration：； 单位s ms 1s=1000ms
过渡的速度变化类型 可选
transition-timing-function：；
ease 默认值 先加速后减速
ease-in 加速
ease-out 减速
ease-in-out 先减速后加速
linear 匀速
过渡的延迟时间 s|ms 可选
transition-delay：； 可以取负值，把负值这段时间效果跳过
简写；transition：all 持续时间 速度变化类型 延迟时间；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 300px;
height: 300px;
background-color: red;
/*transition-property: transform,box-shadow,width,border-radius;*/
/*transition-property: all;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: -0.5s;*/
transition: all 1s linear 1s; /*简写*/
}
.box:hover{
transform: transformX(-10px);
box-shadow: 0 15px 38px green;
width: 1200px;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="box">
</div></div>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
