1.css属性过度覆盖问题:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1, .box2 {
width: 100px;
height: 100px;
background-color: blue;
}
body:hover .box1{
width: 300px;
height: 300px;
/*transition: 具有过渡效果的样式 持续时间 过渡效果 延迟时间, 具有过渡效果的样式 持续时间 过渡效果 延迟时间;*/
/*
默认: 逗号后的相同CSS名设置的过渡样式,会覆盖前面的过渡样式
*/
transition:width 3s, width 1s -1s;
/*
特殊情况:逗号后的相同CSS名设置的过渡样式,过渡时间为零,使用前面的过渡样式。
过渡时间为零的两种情况
- 使用负延迟时间抵消 transition:width 3s, all 1s -1s;
- 显示设置0 transition:width 3s, all 0s;
*/
/*transition:width 3s, width 1s -1s;*/
transition:width 3s, width 0s;
}
</style>
</head>
<body>
<div class="box1"></div>
<script type="text/javascript">
</script>
</body>
</html>