HTML5基础加强css样式篇（css过度覆盖问题）（二十一）

来源：互联网发布：h5小游戏知乎编辑：程序博客网时间：2024/05/17 21:55

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>

0 0