HTML5基础加强css样式篇（css过度效果）（十八）

来源：互联网发布：零基础学c语言书籍编辑：程序博客网时间：2024/06/10 21:52

1.css过度效果简介：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .box {            width: 100px;            height: 100px;            background-color: #7e64ff;            /*visibility: hidden;*/        }        /*鼠标悬浮在.box时，宽度放大2倍*/        .box:hover{            /*设置有过渡效果的CSS属性*//*            对CSS属性的要求：具有“中间值”得CSS样式            中间值: CSS样式是数值或者可以转化成数值*/            /*transition-property: width;*/            /*transition-property: opacity;*/            /*transition-property: display;*/            /*transition-property: visibility;*/            transition-property: background-color;            /*#f00 = red*/            background-color: red;            /*opacity: 1;*/            /*display: block;*/            /*设置过渡持续的时间*/            transition-duration: 3s;            /*width: 200px;*/            /*opacity: 0;*/            /*display: none;*/            /*visibility: hidden;*/        }            </style></head><body><div class="box"></div><script type="text/javascript"></script></body></html>

2.css过度效果简单应用：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .box {            width: 100px;            height: 100px;            background-color: #7e64ff;            border: 1px solid green;        }        /*需求：鼠标悬浮在.box时，宽度放大2倍，背景色变成红色，高度放大2倍*/        .box:hover{            /*通过,分割多个样式*/             /*            我们不需要特别设置 transition-property:            浏览器默认为我们增加了 transition-property: all            */            /*transition-property: width, background-color, height, border;*/            /*transition-property: all;*/            /*仅让宽度产生过渡动画效果*/            transition-property: width;            /*当特指某个CSS样式具有过渡动画效果，需要显示设置 transition-property*/            transition-duration: 3s;            width: 200px;            height: 200px;            background-color: #f00;            border:  19px solid green;        }            </style></head><body><div class="box"></div><script type="text/javascript"></script></body></html>

3.过度时间设置transition-duration

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>过度时间设置</title>    <style type="text/css">        .box {            width: 100px;            height: 100px;            background-color: #7e64ff;            border: 1px solid green;        }        .box:hover{            /*仅让宽度产生过渡动画效果，过渡时间3ms, 高度4s, 背景色过渡*/            transition-property: width, height, background-color, border;            /*transition-duration: 3s;*/            /*transition-duration: 300ms;*/            transition-duration: 2s, 4s, 10s;            /*            过渡时间值                ms 毫秒                s 秒                */            width: 200px;            height: 200px;            background-color: #f00;            border: 19px solid green;        }    </style></head><body><div class="box"></div><script type="text/javascript"></script></body></html>

4.过度延时时间：transition-delay

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .box, .box1 {            width: 100px;            height: 100px;            background-color: #7e64ff;            border: 1px solid green;        }        body:hover .box{            /*transition-property: width, height, background-color, border;;*/            transition-property: width;            transition-duration: 2s;            /*过渡延迟执行*/            /*transition-delay: 1s, .1s;*/            /*可以设置负值*/            transition-delay: -1s;            width: 200px;            /*height: 200px;*/            /*background-color: #f00;*/            /*border: 19px solid green;*/        }        body:hover .box1{            transition-property: width;            transition-duration: 2s;            width: 200px;        }    </style></head><body><div class="box"></div><div class="box1"></div><script type="text/javascript"></script></body></html>

css过度效果：动态边框应用：

效果图：

代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .box {            width: 400px;            height: 150px;            background-color: forestgreen;            position: relative;        }        .border-box{            background-color: orange;            position: absolute;        }        .border-box-top{            height: 8px;            width: 0;        }        .border-box-right{            width: 8px;            height: 0;            right: 0;        }        .border-box-bottom{            height: 8px;            width: 0;            bottom: 0;            right: 0;        }        .border-box-left{            width: 8px;            height: 0;            left: 0;            bottom: 0;        }        /*            触发时机：鼠标悬浮在 .box            过渡时间：每个边的过渡时间是1s            CSS值变化： 0 到指定的大小        */        .box:hover .border-box-top{            width: 100%;            transition-duration: 1s;        }        .box:hover .border-box-right{            height: 100%;            transition-duration: 1s;            transition-delay: 1s;        }        .box:hover .border-box-bottom{            width: 100%;            transition-duration: 1s;            transition-delay: 2s;        }        .box:hover .border-box-left{            height: 100%;            transition-duration: 1s;            transition-delay: 3s;        }    </style></head><body><div class="box">    <div class="border-box border-box-top"></div>    <div class="border-box border-box-right"></div>    <div class="border-box border-box-bottom"></div>    <div class="border-box border-box-left"></div></div><script type="text/javascript"></script></body></html>

0 0